模态框 · PHP/Python/前端/Linux 等等学习笔记

[TOC] ## 模态框 ### 带动画 / 无动画 **带动画** 添加 fade 类 ```  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> ``` **无动画** 取消 fade 类 ```  <div class="modal " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> ... </div> ``` ### 设置尺寸大: 设置 modal-lg ``` <div class="modal " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-lg" role="document"> ... </div> </div> ``` 小: 设置 modal-sm ``` <div class="modal " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-sm" role="document"> ... </div> </div> ``` ## 触发方式 ### data 属性触发 ``` <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#myModal">模态框 </button> ``` ### JS 触发 ``` $('#myModal').modal(options) ``` ## 实例 ### 简单实例 ``` <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">模态框 </button>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> ``` ## js-class 用 class 绑定模态框注意此代码为测试,只是说明原理 modal.html ``` <div class="modal fade" id="myModal" style="overflow:hidden;"> <div class="modal-dialog"> <div class="modal-content"> <block name="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">{:L('_INFO_')}</h4> </div> <div class="modal-body"> <div class="alert alert-warning">{$msg}</div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">{:L('_CLOSE_')}</button> </div> </block> </div> </div> </div> <block name="script"></block> ``` index.html 文件 ``` // code <a href="{:U('user_flow',array('id'=>$row['gid']))}" class="js-load-modal">{:L('_CONFIRM_')}</a> // code // 通用js 中 $(document).on('click','.js-load-modal',function (event) { event.preventDefault(); var href=$(this).attr("href"); if($("#modal").html()==undefined){ var modal = $('<div id="modal" style="z-index:100;"></div>'); $('body').append(modal); } $("#modal").html('<b>loadding</b>').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("取消"); }) }) ```