模態框 · 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("取消"); }) }) ```