博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
封装的alert,confirm弹出框
阅读量:5297 次
发布时间:2019-06-14

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

不爱废话,直接贴代码

CSS :(主要弹出框css)

/*弹出层*/.modal{
position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; background-color: rgba(0, 0, 0, 0.5);}.modal .modal-dialog{
position: relative; width:auto; margin: 10px;}.modal .modal-content{
position: relative; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; outline: 0; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5); max-width: 350px; min-width: 300px; margin: 0 auto; display: block;}.modal .modal-header{
padding: 15px; border-bottom: 1px solid #e5e5e5;}.modal .modal-header h3{
margin: 0; text-align: center;}.modal .modalclose{
position: absolute; right: -10px; top: -12px;}.modal .modalclose i{
color:#FE9900; font-size: 40px;}.modal .modal-body{
position: relative; padding: 15px;}.modal .modal-footer { /*padding: 10px;*/ text-align: right; border-top: 1px solid #e5e5e5; text-align: center;}.modal .modal-footer button{
margin: 10px;}

js:

/* *弹出框调用  Modal.alert({msg:'111'})  Modal.confirm({msg:'111'},function(is){console.log(is)}) **/var dialog_model = '
'document.write(dialog_model)var alr = $("#dialogModal");var windHeight = $(window).height();alr.children().css({ "top":(windHeight/2)-165, "right": "15px",}) var ahtml = alr.html();var Modal = { alert:function(options){
   alr.html(ahtml); this._dialog(options); alr.fadeIn() alr.find('.cancel').hide(); alr.find('.ok').off('click').on('click',function() { alr.fadeOut() }); }, confirm:function(options,callback) {
     alr.html(ahtml); this._dialog(options); alr.fadeIn() alr.find('.cancel').show(); alr.find('.ok').off('click').on('click',function() { callback && callback(true); }); alr.find('.cancel').off('click').on('click',function() { alr.fadeOut(); }) }, _dialog:function(options){ var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');     alr.html(ahtml); var ops = { msg: "数据出错", title: "操作提示", btnok: "确定", btncl: "取消" } $.extend(ops, options); var html = alr.html().replace(reg, function(node, key) { return { Title: ops.title, Message: ops.msg, BtnOk: ops.btnok, BtnCancel: ops.btncl }[key]; }); alr.html(html); }}

(原创)

 

转载于:https://www.cnblogs.com/Mie929094441/p/7661743.html

你可能感兴趣的文章
boost库使用:vs2013下boost::container::vector编译出错解决
查看>>
通过httplib2 探索的学习的最佳方式
查看>>
快来熟练使用 Mac 编程
查看>>
Node.js 入门:Express + Mongoose 基础使用
查看>>
plsql使用,为什么可以能看见其他用户的表
查看>>
一步步教你轻松学奇异值分解SVD降维算法
查看>>
使用pager进行分页
查看>>
UVA - 1592 Database
查看>>
Fine Uploader文件上传组件
查看>>
javascript中的传递参数
查看>>
objective-c overview(二)
查看>>
python查询mangodb
查看>>
consonant combination
查看>>
驱动的本质
查看>>
Swift的高级分享 - Swift中的逻辑控制器
查看>>
Swagger简单介绍
查看>>
sql语句中where与having的区别
查看>>
Python数据分析入门案例
查看>>
vue-devtools 获取到 vuex store 和 Vue 实例的?
查看>>
Linux 中【./】和【/】和【.】之间有什么区别?
查看>>