資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery 阻止模態框開啟時頁面滾動？
模態框是一種特殊的使用者介面，我們將其顯示在網頁所有內容的頂部。它用於在網頁上顯示一些特殊資訊，或將使用者從網頁的常規流程中轉移出去。
例如，您可能在許多網站上看到過，訂閱彈出框出現在網頁上，提示您輸入您的電子郵件地址以訂閱時事通訊。同樣，警報框也是模態框，在您關閉模態框之前不允許您與網頁內容互動。
因此，當我們使用模態框向用戶顯示重要資訊時，始終建議阻止主體滾動，以防止使用者與網頁內容互動，並將注意力集中在模態框的重要資訊上。
在本教程中，我們將學習使用 Jquery 阻止模態框開啟時主體滾動的不同方法。
使用 CSS 的“overflow”屬性停用主體滾動
我們可以使用 overflow 屬性來避免 HTML 元素上的滾動。每當我們將 overflow 屬性的值設定為“hidden”時，它就會停止滾動。
在這種方法中，每當使用者開啟模態框時，我們將 overflow 設定為 hidden；每當使用者關閉模態框時，我們將 overflow 設定為 auto 以允許使用者滾動。
語法
使用者可以按照以下語法來阻止模態框開啟時主體滾動，使用 overflow 屬性。
// add overflow-hidden when users open the modal
$('body').css("overflow", "hidden");
// add overflow-auto when users close the modal
$('body').css("overflow", "auto");
在上面的語法中，我們使用 Jquery 的 CSS() 方法在使用者開啟和關閉模態框時設定網頁主體上“overflow”屬性的特定值。
示例 1
在下面的示例中，我們建立了包含“modal”類名的 div 元素。此外，我們添加了內容以在 div 元素內顯示模態框。接下來，我們在模態框內添加了“關閉模態框”按鈕以關閉模態框，並在網頁上添加了“開啟模態框”按鈕以開啟模態框。
在 CSS 中，我們以這樣的方式設定模態框及其內容的樣式，使其顯示在網頁其他內容的頂部。此外，我們還設定了按鈕的樣式。“modal-open”類在 CSS 中包含“overflow: hidden”CSS 屬性。
我們在開啟按鈕中添加了“modal-open”類，在關閉按鈕中添加了“modal-close”類。在 JavaScript 中，每當使用者單擊“開啟模態框”按鈕時，我們在主體中新增“modal-open”類並開啟模態框。每當使用者單擊“關閉模態框”按鈕時，我們使用 removeClass() 方法從主體中刪除“modal-open”類並關閉模態框。
在輸出中，使用者可以觀察到，當模態框開啟時，他們無法滾動主體。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<style>
.modal {
position: fixed;
display: none;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 15px;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.modal-open { overflow: hidden; }
.btn {
display: inline-block;
padding: 10px 20px;
background-color: green;
color: white;
text-decoration: none;
border-radius: 10px;
}
.scroll { height: 1000px; background-color: red;}
</style>
</head>
<body>
<h3> Using the <i> overflow CSS property </i> to disable the body from scrolling when a modal is opened </h3>
<p> Click the button below to open the modal. </p>
<a href = "#" class = "btn modal-open"> Open Modal </a> <br><br>
<div class = "scroll"> </div>
<div class = "modal">
<h2> Modal Content </h2>
<p> This is the content of the modal window. </p>
<a href = "#" class = "btn modal-close"> Close </a>
</div>
<script>
$(document).ready(function () {
$('.modal-open').on('click', function () {
$('body').addClass('modal-open');
$('.modal').fadeIn();
});
$('.modal-close').on('click', function () {
$('body').removeClass('modal-open');
$('.modal').fadeOut();
});
});
</script>
</html>
示例 2（使用 css() 方法設定 overflow 屬性）
在此示例中，我們使用 Jquery 的 CSS() 方法設定網頁主體的“overflow”屬性。我們在此示例中建立了模態框，與第一個示例相同。
在 Jquery 中，當用戶單擊開啟模態框按鈕時，我們使用 CSS() 方法設定“overflow: hidden”，當用戶單擊關閉模態框按鈕時，我們設定“overflow: auto”。
我們需要將 CSS 屬性作為第一個引數傳遞，並將它的值作為 CSS() 方法的第二個引數傳遞。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<style>
.modal {
position: fixed;
display: none;
top: 20%;
left: 50%;
padding: 15px;
border-radius: 12px;
transform: translate(-50%, -50%);
background-color: white;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: green;
color: white;
text-decoration: none;
border-radius: 10px;
}
.scroll {height: 130%; background-color: green; }
</style>
</head>
<body>
<h3> Using the <i> JQuery's scroll-lock plugin </i> to disable the body from scrolling when a modal is opened </h3>
<p> Click the button below to open the modal. </p>
<a href = "#" class = "btn modal-open"> Open Modal </a> <br> <br>
<div class = "scroll"> </div>
<div class = "modal">
<h2> Modal Content</h2>
<p> This is the content of the modal window. </p>
<a href = "#" class = "btn modal-close"> Close </a>
</div>
<script>
$(document).ready(function() {
$('.modal-open').on('click', function() {
$('body').css("overflow", "hidden");
$('.modal').fadeIn();
});
$('.modal-close').on('click', function() {
$('body').css("overflow", "auto");
$('.modal').fadeOut();
});
});
</script>
</html>
結論
我們學習瞭如何在使用者在網頁上開啟模態框時阻止主體滾動。在這裡，我們以不同的方式使用了“overflow”屬性來實現我們的目標。在第一個示例中，我們透過向主體新增包含 overflow 屬性的特定類來設定“overflow”屬性。在第二個示例中，我們使用 css() 方法設定了 overflow 屬性。
但是，使用者也可以使用 Jquery 的 scroll-lock 外掛來鎖定螢幕，但這可能不允許使用者與模態框互動。
24K+ 瀏覽量
