BootStrap中模態框踩坑

.Muggle發表於2021-11-21
boot

在模態框中使用html標籤上的自定義屬性來開啟模態框後，在使用JS關閉模態框，就會出現多層蒙板問題

image-20211121205749149

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

image-20211121211931847

務必將模態框的 HTML 程式碼放在文件的最高層級內（也就是說，儘量作為 body 標籤的直接子元素），以避免其他元件影響模態框的展現或功能。

如果你把模態框放到一個JSP頁面，然後通過<jsp:include page=""/>標籤引過來，也不算是body的直接子元素，如果你硬要把模態框放到其他位置，也有方法做到

網上有的說使用 $(".modal-backdrop").remove();//刪除class值為modal-backdrop的標籤，可去除陰影來刪除蒙板，但是刪除完之後會出現滾動條消失，無法點選螢幕的致命bug，這種方法直接pass

我這裡的解決辦法就是點選按鈕裡沒有模態框目標和轉換兩個自定義屬性，直接使用JS程式碼來控制開啟和關閉模態框，就可以解決

<button class="btn btn-outline-success addBookTarget">
    新增
</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();

最好的辦法還是聽官方的話，搞這幹嘛，花裡胡哨的，能用就行

相關文章