代码之家 › 专栏 › 技术社区 › timmyblaze

Bootstrap 5模式,带后台交互

bootstrap-5 bootstrap-modal

timmyblaze · 技术社区 · 2 年前

在Bootstrap 5中,我试图创建一个没有背景的模式,仍然允许与网页背景进行交互(您可以在模式打开时突出显示文本或滚动页面)。任何帮助都将不胜感激。

我曾尝试使用css隐藏.model背景,并在创建模态时指定background=“false”。虽然这确实消除了黑暗的背景,但背景仍然无法使用。这些东西似乎在Bootstrap 4中有效,但在Bootstrap5中无效。

0 回复 | 直到 2 年前

Md. Rakibul Islam 2 年前

以下是在Bootstrap 5中如何做到这一点。我在必要时添加了所有评论。如果你有任何问题,请随时提问。

// prevent scrolling on modal closure
function disableScroll() {
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;                                    
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;            

    window.onscroll = function() {
        window.scrollTo(scrollLeft, scrollTop);
        window.onscroll = function() {};
    };
}

/* Hiding the backdrop */
.modal-backdrop{
    display: none;
}

/* Enable scrolling  */
.modal-open {
    /* overflow: hidden; (default) */
    overflow: visible !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch demo modal
    </button>
    
    <!-- Modal --> 
    <!-- data-bs-backdrop="static" <<= attribute is added to prevent modal outside click closure -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <!-- Adding inline event handler for modal close =>>  onclick="disableScroll()" -->
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="disableScroll()"></button>
                </div>

                <div class="modal-body">
                ...
                </div>
                <div class="modal-footer">
                <!-- Adding inline event handler for modal close -->
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="disableScroll()">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Content for scrolling -->
    <div style="width: 100%; height: 3000px; display: flex; justify-content: center; align-items: center;"> Content </div>

    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>