# 模态框 ##模态框语法 util.modal(options); **参数说明：** ``` title: '',//标题 content: '',//内容 footer: '',//底部 id: '',//模态框id，默认为hdMessage width: 600,//宽度 option: {},//bootstrap模态框选项 events: {},//事件,参考bootstrap ``` > 方法会员返回模态框的JS对象 ##核心方法 modal ``` require(['util'], function (util) { var obj = util.modal({ title:'友情提示你哟',//标题 content:'后盾人 人人做后盾',//内容 footer:'<button type="button" class="btn btn-default confirm" data-dismiss="modal">关闭</button>',//底部 width:600,//宽度 events:{ confirm:function(){ //哪个元素上有.confirm类，被点击就执行这个回调 alert('点击了关闭按钮'); } } }); //显示模态框 obj.modal('show'); }); ``` ##加载远程文件 ``` require(['util'], function (util) { util.modal({ content: ['?s=core/user/add'],//加载的远程地址 title: '添加用户', width: 800, show:true,//直接显示 }); }); ``` ##加载远程文件并传递post参数 ``` require(['util'], function (util) { util.modal({ content: ['?s=core/user/add',{name:'后盾网'}],//加载的远程地址 title: '添加站点', width: 800 }); }); ``` ##异步提交表单 ###语法 util.ajaxShow(url, options) ``` url: 远程Url地址 options: 请参考模态框语法 ``` ###实例 ``` util.ajaxShow('?s=core/user/add', { title:'会员注册', width: 700, events: { confirm: function () { alert('点击了确认按钮'); }, cancel: function () { alert('点击了取消按钮'); } } }) ``` ##调用方式 直接调用 ``` <a href="javascript:;" onclick="util.success('操作成功操作提示框');">操作成功操作提示框</a> ``` AMD方式 ``` require(['util'],function(util){ util.success('操作成功操作提示框'); }) ``` ##异步请求 > 具体属性请参考 核心方法 modal ``` require(['bootstrap','util'],function(bootstrap,util){ util.ajaxShow('会员注册','?s=core/user/add',{},{ confirm:function(){ alert('点击了确认按钮'); }, cancel:function(){ alert('点击了取消按钮'); } }) }) ```