如何只在单击按钮时才能加载此弹出窗口

Question

我从教程中得到了这个代码，它可以满足我的需求。 问题是它在页面加载后立即出现，我希望它只在我按下“显示按钮”后显示

<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>

Answer 1

只需添加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>