在做定制頁面的時候，遇到這么一個問題，因為彈出框用的是bootstrap的自帶的彈出框，控制顯示和隱藏也是用自帶的屬性控制
控制顯示，在觸發的地方 例如botton上面加上
data-toggle="modal" data-target="#myModal"
控制關閉，在取消或者確定的地方加上
<button type="button" class="btn btn-primary">Save changes</button>
這樣一來就可以關聯控制顯示和隱藏目標 #myModal 的模態框，但是問題在於
如果模態框中加載的內容過多，因為以上的屬性控制底層其實是控制display none或者block，我們知道從none改成block的時候，是會重新渲染整個元素的，所以在再次點擊彈出模態框的時候又執行顯示的js
就又會加載一次，重復的加載慢，導致不好的用戶體驗
解決辦法：
第一次加載慢，是數據的問題我們這里不討論，在隱藏之后我們可以不用 display：none，（bootstrap中當然用的是$(el).closest(".modal").modal('hide');）這樣顯示的時候只能用show（）解決不了問題，
我們在隱藏的時候不用hide，修改其z-index，將z-index改成一個負數，在body的下面，這樣他就視覺不顯示了，
$(el).closest(".modal").css("z-index",-2);
顯示的時候
$('#'+id).closest(".modal").css("z-index",1050);
這樣一來，只有第一次加載的時候慢，其余來回點擊的時候會速度快
步驟：
1、去掉關聯
點擊關聯時：data-toggle="modal" data-target="#myModal"
關閉關聯時：btn-primary
2、js控制顯示和隱藏直接上代碼：
直接上代碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>解決display渲染時間過長的問題</title> <!-- 設置 viewport --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- IE --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 兼容國產瀏覽器的高速模式 --> <meta name="renderer" content="webkit"> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <style> /*添加一個背景，輔助 z-index顯示或者隱藏用*/ body::before{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-color:#fff; z-index:-1; } </style> </head> <body> <button type="button" class="btn btn-primary btn-lg add-button" data-class="myModal" >Launch demo modal</button> <!-- Modal --> <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"> <ul id="UL" style="max-height:700px;overflow:auto;"> <li></li> </ul> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" onclick="initModel.hide(this)">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <!-- 引入 Bootstrap 的 JS 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script> var str=""; for(var i=0;i<80000;i++){ str+="<li><a>"+i+"</a></li>" } $("#UL").html(str); $(function(){ $("body").on("click",".add-button",function(e){ initModel.show($(e.target).attr("data-class"));//motai }) }) window.initModel={ show:function (id){ //顯示摸態框 $('#'+id).modal('show') $('#'+id).closest(".modal").css("z-index",1050); $(".modal-backdrop").show(); }, hide:function(el){ //$(el).closest(".modal").modal('hide'); $(el).closest(".modal").css("z-index",-2);//如果用上面句的代碼渲染時間會很長，造成不好的用戶體驗 $(".modal-backdrop").hide();//隱藏bootstrap自帶的遮罩層 } } </script> </body> </html>
重要：頁面中只能存在一個bootstrap模態框，如果還存在其他彈框，會導致其他彈出框的input不能獲得焦點，因為bootstrap里面定義了tabindex作用
tabIndex屬性可以設置鍵盤中的TAB鍵在控件中的移動順序,即焦點的順序。tabIndex的值可為0至32767之間的任意數字。
如果使用-1值時，onfocus與onblur事件仍被啟動。tabIndex的值可為0至32767之間的任意數字
所以在設置顯示和隱藏的時候將tabindex=“-1”的屬性去掉既可
/** * 頁面定制 * * @author hpf * @since 2019-01 * */ (function($){ /** * 控制dialog的顯示和隱藏 */ $.fn.showorhideModel={ show:function(id){ //顯示dialog（改z-index） $('#'+id).modal('show') $("#"+id).css("z-index",1050) //顯示模態框 $(".modal-backdrop").show(); $('#'+id).removeAttr("tabindex"); }, hide:function(el){ //隱藏dialog(改z-index) var $el=$(el).closest(".modal"); $el.css("z-index",-1); //將模態框的tabindex去掉，因為會導致其他的彈出層中input不能獲得焦點 $el.removeAttr("tabindex") //隱藏模態框 $(".modal-backdrop").hide(); } } })(jQuery)
