我怎樣才能使這個彈出窗口只加載點擊按鈕

我從教程中得到了這段代碼，它可以滿足我的需要。問題是，它的頁面加載，在那裏，因爲我想讓它顯示後，才按下「顯示按鈕」我怎樣才能使這個彈出窗口只加載點擊按鈕

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

來源

2017-01-31 bogga88

add'display：none;'to'.pop-outer' –

working，thank you – bogga88

就在<div class="pop-outer">

下面添加style="display:none;"後迫切出現在全工作的源代碼。

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

來源

2017-02-01 05:49:46

我怎樣才能使這個彈出窗口只加載點擊按鈕

回答

相關問題