http://nakupanda.github.io/bootstrap3-dialog/
. BootstrapDialog.show关闭时刷新/
需要的是关闭的同时刷新页面,其实是可以有任何操作;
BootstrapDialog.show({ title : "消息提醒", message : "。。。。", onhide : function(dialogRef){ location.reload(); } })
e.preventDefault();//阻止a链接的跳转行为
BootstrapDialog.show函数底层简化
http://www.cnblogs.com/yuanpengchao/p/5773892.html
也就是说,只要你要写的界面包含了bootstrap就可以使用这个标准的弹窗;
调用方法;
0、弹窗底层 参数介绍
1、title 弹窗标题
2、html 弹窗内容(可以夹带左侧的一个图标自动对齐)
3、url 弹窗关闭后的跳转地址
4、callback function 点击确定后的执行函数
5、flog 是否强制跳转路径
***/
1、基本的乐学一百标准弹窗:
BootstrapDialog1.Init('提示','你好');
当不传递回调函数,与url地址时,确定按钮与取消按钮点击都是关闭弹窗;
2、带有url跳转的弹窗:
BootstrapDialog1.Init('提示','你好','mk.php?do=article_new&nav_id=-100');
url可以是任意地址,不局限与乐学地址;点击确定后跳转;
3、带有回调函数的弹窗:
举个例子:
<script type='text/javascript'> var TESTco={ fun1:function (content) { alert(content); } } $(function(){ BootstrapDialog1.Init('提示','你好','mk.php?do=article_new&nav_id=-100','TESTco.fun1(123);'); }); </script>
运行结果:
当然,不局限与非要传递一个url可以不传递,那么上边的执行结果就是,不跳转,执行函数;可以在函数中做任何事情;
4、强制跳转;
有些弹窗关闭时必须要跳转至某个路径,那么就会用到最后一个参数
标题,内容与URL要传递,可以不传递回调函数,最后将参数设置为true
任何形式的关闭都将自动跳转url 确定按钮,空白处,关闭按钮等;
底层代码:
var BootstrapDialog1={ /*** * 弹窗底层 * @param title 弹窗标题 * @param html 弹窗内容 * @param url 弹窗关闭后的跳转地址 * @callback function 点击确定后的执行函数 * ***/ Init :function(title,html,url,callback,flog){ BootstrapDialog.show({ title : title, type: BootstrapDialog.TYPE_DEFAULT, size: BootstrapDialog.SIZE_NORMAL, message: html, cssClass:'BootstrapDialog1', buttons: [{ label: '确定', action: function(result){ if(callback){ eval(callback); } if(url){ window.location.href=url; } result.close(); } },{ label: '取消', cssClass:'cancel_btn', action: function(result){ result.close(); } }], onhidden : function () { if(url && flog){ window.location.href=url; } } }); } }
CSS代码如下:
/***弹窗样式开始*******/ .BootstrapDialog1{margin-top:15%;} .BootstrapDialog1 .modal-dialog .modal-content{border-radius:0px;font-family:微软雅黑;} .BootstrapDialog1 .modal-dialog .modal-content .modal-header{background-color:#E8E8E8;} .BootstrapDialog1 .modal-dialog .modal-content .modal-body{line-height:150px;text-align:center;font-size:15px;} .BootstrapDialog1 .modal-dialog .modal-content .modal-body img{margin-right:80px;} .BootstrapDialog1 .modal-dialog .modal-content .modal-body span{font-size:20px;} .BootstrapDialog1 .modal-dialog .modal-content .modal-footer {border-top:1px dashed #e5e5e5} .BootstrapDialog1 .modal-dialog .modal-content .modal-footer .bootstrap-dialog-footer .bootstrap-dialog-footer-buttons{text-align:right;} .BootstrapDialog1 .modal-dialog .modal-content .modal-footer .bootstrap-dialog-footer .bootstrap-dialog-footer-buttons .btn{padding:8px 40px;background-color:#EC6C00;border-radius:0px;color:#FFFFFF;border:1px solid #EC6C00;} .BootstrapDialog1 .modal-dialog .modal-content .modal-footer .bootstrap-dialog-footer .bootstrap-dialog-footer-buttons .cancel_btn{color:#666666;background-color:#FFFFFF;border:1px solid #CCCCCC;} /***弹窗样式结束*******/
bootstrap dialog 自动关闭
var dlg = BootstrapDialog.show({ message: 'Hi Apple!' }); setTimeout(function(){ dlg.close(); },1000);
扩展:
https://stackoverflow.com/questions/tagged/twitter-bootstrap
https://www.w3schools.com/bootstrap/default.asp
http://www.jqueryscript.net/demo/jQuery-Modal-Dialog-Plugin-For-Bootstrap-3-Bootstrap-3-Dialog/examples/
https://nakupanda.github.io/bootstrap3-dialog/