模态框

[TOC] ## 模态框 ### 带动画 / 无动画 **带动画** 添加 fade 类 ``` ``` **无动画** 取消 fade 类 ``` ``` ### 设置尺寸 大: 设置 modal-lg ``` ``` 小: 设置 modal-sm ``` ``` ## 触发方式 ### data 属性触发 ``` 模态框 ``` ### JS 触发 ``` $('#myModal').modal(options) ``` ## 实例 ### 简单实例 ``` 模态框 ``` ## js-class 用 class 绑定模态框 注意 此代码为测试,只是说明原理 modal.html ``` ``` index.html 文件 ``` // code {:L('_CONFIRM_')} // code // 通用js 中 $(document).on('click','.js-load-modal',function (event) { event.preventDefault(); var href=$(this).attr("href"); if($("#modal").html()==undefined){ var modal = $(''); $('body').append(modal); } $("#modal").html('loadding').load(href,function (e){ $('#myModal').modal('show'); }) // 四个事件 // show.bs.modal 触发前 // shown.bs.modal 触发后 // hide.bs.modal 隐藏时 // hidden.bs.modal 隐藏后 $("#modal").on("hidden.bs.modal",function () { console.log("取消"); }) }) ```