Не работает всплывающее окно

378

21 сентября 2017, 15:52

Делаю модальное окно на jquery, но что-то оно не работает...всплывающее окно со словом "Hello" появляется с самого начала и не исчезает при нажатии на кнопку Click... консоль браузера ошибок не обнаружила

my_script.js

$('.show_popup').click(function () {
    var popup_id = $('#' + $(this).attr("rel"));
    $(popup_id).show();
    $('.overlay_popup').show();
})
$('.overlay_popup').click(function () {
    $('.overlay_popup, .popup').hide();
})

index.php:

<!doctype html>
<html>
<head> 
    <meta charset="utf-8">
    <link rel="stylesheet" href="my_style.css">
    <script
        src="http://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous"></script>
    <script src="my_script.js"></script>
</head>
<body>
    <div class="content">
        <button class="show_popup blue_btn" rel="popup1">Click</button>
    </div>
    <div class="overlay_popup"></div>
    <div class="popup" id="popup1">
       <div class="object">
          <h1>Hello!</h1>      
       </div>
    </div>
</body>
</html>

Answer 1

Нужно прописать необходимый стили, чтобы изначально скрыть .popup и .overlay_popup:

$('.show_popup').click(function() { 
  var popup_id = $('#' + $(this).attr("rel")); 
  $(popup_id).show(); 
  $('.overlay_popup').show(); 
}) 
$('.overlay_popup').click(function() { 
  $('.overlay_popup, .popup').hide(); 
})

.popup, 
.overlay_popup { 
  display: none; 
} 
 
.overlay_popup { 
  position: fixed; 
  left: 0px; 
  top: 0px; 
  right: 0px; 
  bottom: 0px; 
  z-index: 2; 
  background: rgba(0, 0, 0, 0.5); 
} 
 
.popup { 
  position: fixed; 
  z-index: 3; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  max-width: 200px; 
  padding: 20px; 
  background: #fff; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="content"> 
  <button class="show_popup blue_btn" rel="popup1">Click</button> 
</div> 
 
<div class="overlay_popup"></div> 
 
<div class="popup" id="popup1"> 
  <div class="object"> 
    <h1>Hello!</h1> 
  </div> 
</div>