bootstrap模态框二次封装
方便工作需要,对于模态框二次封装,可拖动;15种动画效果,先看效果图;
Demo请看留言第一条; <div class="panel panel-default"> <div class="panel-body"> <button class="btn btn-info" type="button">提示信息</button> <button class="btn btn-warning" type="button">警告信息</button> <button class="btn btn-success" type="button">成功信息</button> <button class="btn btn-danger" type="button">错误信息</button> <button class="btn btn-primary" type="button">询问信息</button> <button class="btn btn-default" type="button">自动关闭</button> </div> </div> <div class="panel panel-default"> <div class="panel-body"> <button class="btn btn-success btn-sm" id="test1"> FlipVertical </button> <button class="btn btn-default btn-sm" id="test3"> SlideBottomContainer </button> <button class="btn btn-default btn-sm" id="test4"> SlipTopContainer </button> <button class="btn btn-default btn-sm" id="test5"> SlideRightContainer </button> <button class="btn btn-default btn-sm" id="test6"> RotateBottom </button> <button class="btn btn-default btn-sm" id="test7"> Blur </button> <button class="btn btn-default btn-sm" id="test8"> RotateLeft </button> <button class="btn btn-default btn-sm" id="test9"> Sign </button> <button class="btn btn-default btn-sm" id="test10"> Fall </button> <button class="btn btn-default btn-sm" id="test11"> Slit </button> <button class="btn btn-default btn-sm" id="test12"> Newspaper </button> <button class="btn btn-default btn-sm" id="test13"> SuperScaled </button> <button class="btn btn-default btn-sm" id="test14"> SideFall </button> <button class="btn btn-warning btn-sm dialog" id="test15" data-title="外部页面" data-animation="ShowModalAnimation.FlipVertical" data-external=true data-onload="javascript: function(){ alert(‘测试‘)}" data-size="modal-full" data-content="http://blog.51cto.com/317057112"> iframe页面 </button> <button class="btn default btn-sm" id="test16"> SideFall </button> </div> </div> <script> }) $("#test5").dailog({ title: ‘测试5‘,//窗体标题 animation: ShowModalAnimation.SlideRightContainer,}) $("#test6").dailog({ title: ‘测试6‘,//窗体标题 animation: ShowModalAnimation.RotateBottom,}) $("#test7").dailog({ title: ‘测试7‘,//窗体标题 animation: ShowModalAnimation.Blur,}) $("#test8").dailog({ title: ‘测试8‘,//窗体标题 animation: ShowModalAnimation.RotateLeft,}) $("#test9").dailog({ title: ‘测试9‘,//窗体标题: animation: ShowModalAnimation.Sign,content: "<p>我是测试窗口</p>",}) $("#test10").dailog({ title: ‘测试10‘,//窗体标题 animation: ShowModalAnimation.Fall,}) $("#test11").dailog({ title: ‘测试11‘,//窗体标题 animation: ShowModalAnimation.Slit,}) $("#test12").dailog({ title: ‘测试12‘,//窗体标题 animation: ShowModalAnimation.Newspaper,}); $("#test13").dailog({ title: ‘测试13‘,//窗体标题 animation: ShowModalAnimation.SuperScaled,}); $("#test14").dailog({ title: ‘测试14‘,//窗体标题 animation: ShowModalAnimation.SideFall,buttons: [{ text: "OK",style: "btn btn-info btn-sm",clickEvent: function () { alert($(this).text()); } },{ text: "取消",clickEvent: function () { alert($(this).text()); } }] }); $("#test16").dailog({ title: ‘测试16‘,content: "https://www.baidu.com/",size: ModalSize.lg,external: true,}); $("button:contains(‘提示信息‘)").on("click",function () { Controls.Alert("温馨提示",messageType.info,"提示信息!"); }); $("button:contains(‘警告信息‘)").on("click",function () { Controls.Alert("警告",messageType.warn,"警告信息!"); }); $("button:contains(‘成功‘)").on("click",function () { Controls.Alert("成功",messageType.success,"成功信息!"); }); $("button:contains(‘错误信息‘)").on("click",function () { Controls.Alert("错误",messageType.error,"错误信息!"); }); $("button:contains(‘询问信息‘)").on("click",function () { Controls.Confirm("询问","确定删除此项?",function () { alert("点击了确定按钮"); },function () { alert("点击了取消按钮"); }); }); $("button:contains(‘自动关闭‘)").on("click",function () { Controls.Alert("自动关闭","我会自动关闭!",true,3000); }); </script> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |