博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
复写alert()弹框
阅读量:5771 次
发布时间:2019-06-18

本文共 1427 字,大约阅读时间需要 4 分钟。

在项目中 有时请求完接口需要给用户提示一些信息最方便醒目的就是弹框提示,很多UI组件库也有弹框,但是使用时要引入,引入很麻烦而且更改也比较费劲!!!还有一点就是一个项目弹框还是统一风格比较好看,window.alert()当你点击确定才会执行下面的流程 所以我也是参考他人自己写了一个弹框,不说了。上代码

import $ from 'jquery'const width = $(window).width() * 0.8const height = 160let messageBox = (ele, title, content) => {  var html = $(ele)  html.find('.window-layer').width(width).css('margin-left', -width / 2).css('margin-top', -height / 2 - 36)  if (valueEmpty(title)) {    html.find('.title').remove()    html.find('.window-layer .body-layer').css('border-radius', '3px')  } else {    html.find('.title').find(':header').html(title)  }  html.find('.content').html(content)  html.appendTo('body').fadeIn('fast')  $('.win .w-btn:first').focus()  $('.w-btn').click(() => {    $('.win iframe').fadeOut()    $('.win').fadeOut('fast')    setTimeout(() => {      $('.win iframe').remove()      $('.win').remove()    }, 200)  })}window.alert = (title, content, message) => {  var html = `    

` messageBox(html, title, content, message)}function valueEmpty (str) { if (str === 'null' || str == null || str === '' || str === 'undefined' || str === undefined || str === 0) { return true } else { return false }}复制代码

具体样式大家可以先写好然后再写js进行传值js文件可以这样写 入口文件引入就OK 在组件中使用时就直接alert()

简单就这些 有问题可以一起交流 嘿嘿相互学习

转载地址:http://oupux.baihongyu.com/

你可能感兴趣的文章
.NET开源现状
查看>>
可替换元素和非可替换元素
查看>>
2016/08/25 The Secret Assumption of Agile
查看>>
(Portal 开发读书笔记)Portlet间交互-PortletSession
查看>>
搭建vsftpd服务器,使用匿名账户登入
查看>>
AMD改善Linux驱动,支持动态电源管理
查看>>
JAVA中循环删除list中元素的方法总结
查看>>
Java虚拟机管理的内存运行时数据区域解释
查看>>
人人都会深度学习之Tensorflow基础快速入门
查看>>
ChPlayer播放器的使用
查看>>
js 经过修改改良的全浏览器支持的软键盘,随机排列
查看>>
Mysql读写分离
查看>>
Oracle 备份与恢复学习笔记(5_1)
查看>>
Oracle 备份与恢复学习笔记(14)
查看>>
分布式配置中心disconf第一部(基本介绍)
查看>>
Scenario 9-Shared Uplink Set with Active/Active uplink,802.3ad(LACP)-Flex-10
查看>>
UML类图中的六种关系
查看>>
探寻Interpolator源码,自定义插值器
查看>>
一致性哈希
查看>>
mysql(待整理)
查看>>