在bootstrap3.7的基础上自定义模态dialog小工具
来源:互联网 发布:iphone6s plus 淘宝 编辑:程序博客网 时间:2024/06/18 01:20
背景
今年带技术前端招的都是新人(公司决定),看在我让他们自学VUE和rout累成狗的份上我基本没让他们参与后台管理界面的搭建。但是后台界面又需要像toast,dialog这样的样式,以及vue分页这些小插件,于是便在加班加点的情况下自己基于jquery做了一些小工具,今天主要讲讲对话框,毕竟bootstrap的对话框大家用的还是很多的,写个方法而不需要官网上面那样写html的自定义大多都很繁杂,我也是在看了大量其他人自定义的方法后根据自己的简单需求写的通用的写出来。
看效果图:这个是通过URL显示对话框内容
默认对话框
http://v3.bootcss.com/javascript/#modals
官方提供的模态对弹框
<!-- Small modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> ... </div> </div></div>
要实现弹框都得自己在页面上写个框的模板,为何这些通用的模板不能封装起来,具体的内容什么的我们自己定义呢,因此我自己写就倒腾出来了,毕竟写JS交互的时候我只想使用个弹窗而已不想再在页面上加html了。
代码如下
/*********** * jquery 扩展插件 * 依赖 jquery.js * 自定义bootstrap模态对话框工具 * @author zjcjava@163.com *warning fa-exclamation-triangle *sucess fa-check-circle *info fa-info-circle *erro fa-exclamation-circle * @param {Object} $ */(function ($) { /*********** * 对话框 * jquery 扩展插件 * 依赖 jquery.js * 自定义bootstrap模态对话框工具 * @author zjcjava@163.com * @param 配置文件如下: * {title: '标题', content: '内容', url:'baidu.com', width: 600, onShow:function(){},//显示时回调方法 onClose:function(){},//关闭时回调方法 buttons: [ { html: '<button type="button" class="btn btn-sm btn-primary btn-ok">确定</button>', callback: function(){ //点击确定按钮的回调 console.log("确定"); } }]}//自定义按钮和点击事件 * */ $["xmDialog"] = function(conf){ if(!conf){ conf={title:"竹子的标题",content:"hello,竹子"}; } if(!conf.id){ // 获取当前时间戳(以s为单位) var timestamp = Date.parse(new Date()); conf.id="xm_id_"+timestamp; } if(!conf.title){ conf.title=""; } if(!conf.content){ conf.content=""; } if(conf.width&&conf.width>30){ conf.width="style='width:"+conf.width+"px;'"; } //显示事件 if(conf.onShow&&typeof(conf.onShow)!= 'function'){ //是函数 throw "conf.onShow is not a function"; return false; } //关闭事件 if(conf.onClose&&typeof(conf.onClose)!= 'function'){ //是函数 throw "conf.onClose is not a function"; return false; } //按钮 var buttonHtml="<button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button>"; if(conf.buttons instanceof Array){ //是函数 buttonHtml=""; } var dialogHtml="<div id='"+conf.id+"' class='modal fade' tabindex='-1' role='dialog' aria-labelledby='mySmallModalLabel' aria-hidden='true' > "; dialogHtml+="<div class='modal-dialog' "+conf.width+">"; dialogHtml+="<div class='modal-content'>"; dialogHtml+="<div class='modal-header'>"; dialogHtml += "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>"; dialogHtml += "<h4 class='modal-title' id='myModalLabel'>"+conf.title+"</h4>"; dialogHtml += "</div>"; dialogHtml += "<div class='modal-body'>"; dialogHtml += conf.content; dialogHtml += "</div>"; dialogHtml += "<div class='modal-footer'>"; dialogHtml += buttonHtml; //dialogHtml += "<button type='button' class='btn btn-primary'>提交更改</button>"; dialogHtml += "</div>"; dialogHtml+="</div>"; dialogHtml+="</div>"; dialogHtml+="</div>"; var dialogObj=$(dialogHtml); //添加URL内容 if(conf.url){ dialogObj.find(".modal-body").load(conf.url); } //添加button并绑定事件 if(conf.buttons instanceof Array){ //是函数 for(var o in conf.buttons){ var btObj=$(conf.buttons[o].html); if(typeof(conf.buttons[o].callback)== 'function'){ btObj.on("click",function(){ conf.buttons[o].callback(); $('#'+conf.id).modal('hide'); }); } dialogObj.find(".modal-footer").append(btObj); } } $("body").append(dialogObj); $('#'+conf.id).modal('show'); $('#identifier').on('show.bs.modal', function () { // 执行一些动作... if(typeof(conf.onShow)== 'function'){ conf.onShow(); } }); $('#'+conf.id).on('hidden.bs.modal', function () { // 执行一些动作... $('#'+conf.id).remove(); if(typeof(conf.onClose)== 'function'){ conf.onClose(); } }) };}( jQuery ));
直接调用就可以弹出默认的框框了;
$.xmDialog()
<button type="button" onclick=" $.xmDialog();">对话框</button>//在js中直接调用,需要加入jquery和bootstarp的文件$.xmDialog()
实现自定义对话框和回调方法
var conf={title: '竹子提问', content: '你是单身狗么', onShow:function(){},//显示时回调方法 onClose:function(){},//关闭时回调方法 buttons: [ { html: '<button type="button" class="btn btn-sm btn-primary btn-ok">不是</button>', callback: function(){ //点击确定按钮的回调 console.log("不是才怪"); }},{ html: '<button type="button" class="btn btn-sm btn-primary btn-ok">确定</button>', callback: function(){ //点击确定按钮的回调 console.log("哈哈单身狗好啊"); }} ]};
自定义文本内容
var conf={title: '竹子', url: 'http://localhost:8080/xm-web-sys/', onShow:function(){},//显示时回调方法 onClose:function(){},//关闭时回调方法 buttons: [ { html: '<button type="button" class="btn btn-sm btn-primary btn-ok">确定</button>', callback: function(){ //点击确定按钮的回调 console.log("哈哈单身狗好啊"); }} ]};
自定义URL的链接内容
阅读全文
0 0
- 在bootstrap3.7的基础上自定义模态dialog小工具
- WordPress自定义小工具
- 自定义jquery小工具
- 推荐一款不错的dialog小工具:artDialog
- 在写JS时的小工具
- WordPress添加自定义小工具
- 自定义水波球清理内存的悬浮窗小工具
- 方便的小工具
- xorg的小工具
- 有意思的小工具
- 整理的小工具
- 实用的小工具
- 小工具的使用
- Windows 7 小工具
- 自定义触发器(在自定义动画效果的基础上)
- 一个在命令行下改注册表权限的小工具
- 读取grib格式的小工具,在linux中的安装
- 两个在多线程环境下使用的小工具类
- BZOJ1492:[NOI2007]货币兑换 (CDQ分治+斜率优化DP | splay动态维护凸包)
- matlab2c使用c++实现matlab函数系列教程-cumprod函数
- 【深入理解计算机原理第十一章】---网络编程
- Linux-虚拟网络设备-tun/tap
- 华为笔试题(4)
- 在bootstrap3.7的基础上自定义模态dialog小工具
- python 爬取电影下载链接
- React Native带你实现scrollable-tab-view(一)
- String与StringBuffer的区别
- 实现电脑重启指定次数的bat
- 程序之原子性、可见性、有序性
- 把Excel表格通过MySql Workbench导入数据库表中的使用总结
- HDU 4280 Island Transport (最大流)
- 如何从零设计结构清晰、操作友好的权限管理模块