我有这个脚本：
<script type="text / javascript">
/* Popup on scroll. */
jQuery(function($){
$(window).one('scroll',function() {
var y = $(this).scrollTop();
if (y > 100) {
$('.popup').css({display: 'flex'}).fadeIn();
document.getElementById('content').style.display = "none";
} else {
$('.popup').css({display: 'none'}).fadeOut();
}
});
});
jQuery(function($){
$('.popup-link').on('click', function(){
$(this).closest(".popup").remove();
document.getElementById('content').style.display = "block";
});
});
</script>
HTML中的用法：
<div class="popup">
<div class="popup-page">
<a class="popup-link" href="url" target="_blank">
This is LINK TEXT.
</a>
</div>
</div>
由于某些原因，它的工作，如果页面重新加载一半，但不，它没有开火，在它工作之前，所以我不知道发生了什么。我在wordpress网站上使用这个。
使用jQuery的.on()而不是.one()。
若要随后删除任何侦听器，请使用.off()方法：
null
jQuery(function($) {
// POPUP
// Yep, all you need for all your popups
$("[data-popup]").on("click", function() {
$(this.dataset.popup).toggleClass("show");
});
// CUSTOM POPUP STUFF
const $popupCustom = $("#popup-custom");
function popupScroll() {
$popupCustom.toggleClass("show", $(window).scrollTop() > 100);
}
function popupDestroy() {
// Remove listener from window scroll using .off()
$(window).off('scroll', popupScroll);
}
// Listen for window scroll:
$(window).on('scroll', popupScroll);
// Destroy the scroll listener on click:
$("#popup-destroy").on("click", popupDestroy);
});body {
min-height: 300vh; /* DEMO ONLY */
}
.popup {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
transition: 0.3s;
pointer-events: none;
opacity: 0;
visibility: hidden;
}
.popup.show {
pointer-events: auto;
opacity: 1;
visibility: visible;
}
.popup-page {
padding: 20px;
background: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}<div id="popup-custom" class="popup">
<div class="popup-page">
<h1>Hello, World</h1>
<button type="button" data-popup="#popup-custom" id="popup-destroy">DON'T SHOW ON SCROLL AGAIN!</button>
</div>
</div>
<div id="content">
<h1>THIS IS SOME CONTENT</h1>
Scroll or<br>
<button type="button" data-popup="#popup-custom">SHOW POPUP</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>