# 模態框 ##模態框語法 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('點擊了取消按鈕'); } }) }) ```