Bagaimana untuk melumpuhkan penatalan apabila modal dibuka - JS Halaman Penuh
P粉090087228
2023-08-18 00:15:20
<p>Apa yang saya mahu lakukan ialah, apabila modal dibuka, lumpuhkan tatal JavaScript untuk keseluruhan halaman. Masalahnya ialah apabila saya membuka modal dan cuba menatal, ia mengalihkan kandungan di belakang modal, iaitu halaman web sebenar, dan saya mahu melumpuhkannya. Apabila modal dibuka, latar belakang harus dibekukan. </p>
<pre class="brush:php;toolbar:false;"><div id="fullpage">
<div class="section">
<?php sertakan './home-page/home-page-manufacturing-list.php';?>
<button id="turnOff" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Buka kotak modal</button>
</div>
</div>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="closeModal('modal01')" class="w3-button w3-display-topright">×</span>
<div class="penapis latar belakang bekas">
<div class="row">
<div class="col-12">
<h3 class="section-title"></h3>
</div>
<div class="col-12">
<h5>Di syarikat kami, kami mempunyai minat untuk kerja kayu dan ia ditunjukkan dalam semua projek fabrikasi dan reka bentuk dalaman kami. Kami pakar dalam mencipta perabot kayu tersuai, lekapan dan aksen yang berfungsi kerana ia cantik</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<skrip>
$(document).ready(function() {
var isModalOpen = palsu;
// Lumpuhkan penatalan FullPage.js apabila modal dibuka
fungsi disableFullPageScroll() {
$.fn.fullpage.setAllowScrolling(false);
$.fn.fullpage.setKeyboardScrolling(false);
}
// Dayakan tatal FullPage.js apabila modal ditutup
fungsi enableFullPageScroll() {
$.fn.fullpage.setAllowScrolling(true);
$.fn.fullpage.setKeyboardScrolling(true);
}
//Buka kotak modal
function openModal(modalId) {
document.getElementById(modalId).style.display = 'block';
isModalOpen = benar;
disableFullPageScroll();
}
// Tutup kotak modal
function closeModal(modalId) {
document.getElementById(modalId).style.display = 'tiada';
isModalOpen = palsu;
enableFullPageScroll();
}
// Kendalikan peristiwa klik butang untuk membuka dan menutup modal
$('#openModalButton').on('klik', function() {
openModal('id01'); // Gantikan 'id01' dengan ID modal anda
});
$('#closeModalButton').on('klik', function() {
closeModal('id01'); // Gantikan 'id01' dengan ID modal anda
});
// Mengendalikan acara skrol
$(window).on('scroll', function(event) {
if (isModalOpen) {
event.preventDefault();
event.stopPropagation();
}
});
});
</script></pre>
Kod yang anda berikan nampaknya betul untuk melumpuhkan penatalan apabila modal dibuka. Walau bagaimanapun, terdapat beberapa kemungkinan punca masalah:
openModal
函数。相反,它直接操作模态框的样式。这意味着isModalOpen
变量没有被设置为true
,disableFullPageScroll
函数也没有被调用。要解决这个问题,您应该在按钮被点击时使用openModal
yang anda takrifkan dalam skrip:closeModal
. Ia sepatutnya kelihatan seperti ini:closeModal
函数没有在全局作用域中定义,但它被从HTML中调用。这可能会导致错误。要解决这个问题,您应该在全局作用域中定义closeModal
Fungsi ini tidak ditakrifkan dalam skop global, tetapi ia dipanggil dari HTML. Ini boleh menyebabkan ralat. Untuk menyelesaikan masalah ini, anda harus mentakrifkan fungsi
menggunakan kaedah FullPage.js untuk melumpuhkan dan mendayakan penatalan. Jika anda tidak menggunakan FullPage.js, atau ia tidak dimulakan dengan betul, kaedah ini tidak akan berfungsi. Anda harus menyemak bahawa FullPage.js disertakan dan dimulakan dengan betul dalam projek anda.disableFullPageScroll
和enableFullPageScroll
的preventDefault
和stopPropagation
方法可能不足以阻止所有情况下的滚动。在模态框打开时,您可能还需要将overflow
样式设置为hidden
,并在模态框关闭时将其重置为auto
dalam tatal pengendali acara: