Как я могу сделать это всплывающее окно для загрузки только при нажатии кнопки

Я получил этот код из учебника, и это нормально для того, что мне нужно. Проблема заключается в том, что она появится в ближайшее время после загрузки страницы, где, как я хочу, чтобы показать только после того, как я нажимаю кнопку «показать»Как я могу сделать это всплывающее окно для загрузки только при нажатии кнопки

<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

Добавить 'display: none;' to '.pop-outer' –

работал, спасибо – bogga88

Просто добавьте 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>

источник

2017-02-01 05:49:46

Как я могу сделать это всплывающее окно для загрузки только при нажатии кнопки

ответ

Смежные вопросы