我从教程中获得了这段代码，它可以满足我的需要。问题是它在页面加载后立即出现，而我希望它仅在按下“显示按钮”后才显示
<html lang="en">
<head>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$(".open").click(function(){
$('.pop-outer').fadeIn('slow')
});
$(".close").click(function(){
$('.pop-outer').fadeOut('slow')
});
});
</script>
<style>
.pop-outer{
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pop-inner{
background-color: #ffffff;
width: 500px;
height: 300px;
padding: 25px;
margin: 15% auto;
}
</style>
</head>
<body>
<button class="open">show button</button>
<div class="pop-outer">
<div class="pop-inner">
<button class="close">X</button>
<h2>This is a custom pop-up exaple</h2>
<p> text text text text text text text text text text text text text text text text text text text text </p>
</div>
</div>
</body>
</html>
最佳答案
只需添加 style="display:none;"在<div class="pop-outer">
下面是完整的工作源代码。
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Optional theme -->
<script>
$(document).ready(function(){
$(".open").click(function(){
$('.pop-outer').fadeIn('slow')
});
$(".close").click(function(){
$('.pop-outer').fadeOut('slow')
});
});
</script>
<style>
.pop-outer{
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pop-inner{
background-color: #ffffff;
width: 500px;
height: 300px;
padding: 25px;
margin: 15% auto;
}
</style>
</head>
<body>
<button class="open">show button</button>
<div class="pop-outer" style="display:none;">
<div class="pop-inner">
<button class="close">X</button>
<h2>This is a custom pop-up exaple</h2>
<p> text text text text text text text text text text text text text text text text text text text text </p>
</div>
</div>
</body>
</html>
关于javascript - 如何使此弹出窗口仅在单击按钮时加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41969445/