Закрытие всплывающего окна js

520

01 марта 2017, 21:20

Всем привет. Подскажите пожалуйста способы закрытия модального окна по клику на кнопку? У меня есть скрипт, который именно это и делает, но после нажатия на кнопку закрытия - модальное окно больше не появляется. Прилагаю весь код и пояснения.

$(function() { 
  $('#close_modal').click(function() { 
    $("#panel-modal").hide(); // скрытие окна  
    $('.background-mask').hide(); // скрытие маски затемнения  
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="panel-modal"> <!--само модальное окно--> 
  <div id="close_modal"><i class="fa fa-times"></i></div> <!--кнопка закрытия--> 
  <div id="details-modal-body"></div> <!--содержимое--> 
</div>

Answer 1

у jQuery есть своя функция проверки состояния елемента. Смотрите http://api.jquery.com/toggle/

$(function() { 
  $('#close_modal').click(function() { 
    $("#panel-modal").hide(); // скрытие окна  
    $('.background-mask').hide(); // скрытие маски затемнения  
  }); 
$(".toggle").click(function() { 
$("#panel-modal").toggle(); 
}); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<span class="toggle">Показать</span> 
<div id="panel-modal"> <!--само модальное окно--> 
  <div id="close_modal"><i class="fa fa-times">Закрыть</i></div> <!--кнопка закрытия--> 
  <div id="details-modal-body">body</div> <!--содержимое--> 
</div>