在模態框中使用html標簽上的自定義屬性來打開模態框后,在使用JS關閉模態框,就會出現多層蒙板問題

出現這個問題的原因就是沒有仔細看bootstrap的官方檔案,我人麻了,搞了好久

務必將模態框的 HTML 代碼放在檔案的最高層級內(也就是說,盡量作為 body 標簽的直接子元素),以避免其他組件影響模態框的展現或功能,
如果你把模態框放到一個JSP頁面,然后通過<jsp:include page=""/>標簽引過來,也不算是body的直接子元素,如果你硬要把模態框放到其他位置,也有方法做到
網上有的說使用 $(".modal-backdrop").remove();//洗掉class值為modal-backdrop的標簽,可去除陰影來洗掉蒙板,但是洗掉完之后會出現滾動條消失,無法點擊螢屏的致命bug,這種方法直接pass
我這里的解決辦法就是點擊按鈕里沒有模態框目標和轉換兩個自定義屬性,直接使用JS代碼來控制打開和關閉模態框,就可以解決
<button >
添加
</button>
<script>
$(".addBookTarget").click(() =>{
$("#addBookModel").modal("show");
})
$("#addBook").click(function (){
alert(1);
$("#addBookModel").modal("hide");
});
</script>
官方給的獲得模態框物件的方法
// 這里感覺有些麻煩,直接使用上面的就可以了
let myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
myModal.show();
myModal.hide();
最好的辦法還是聽官方的話,搞這干嘛,花里胡哨的,能用就行
作者: 我吃提子
出處: https://www.cnblogs.com/MuggleP/p/15586010.html
關于作者:我吃提子
本文著作權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出, 原文鏈接 如有問題, 可郵件([email protected])咨詢.
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/373896.html
標籤:jQuery
下一篇:垃圾回識訓制
