модальный скрипт: кнопка закрытия в модальном режиме

Question

Я не могу на всю жизнь понять, как закрыть модал. Ручка здесь: https://codepen.io/stdusan/pen/jOPepGg

<button data-modaal-content-source="#inline" data-modaal-type="inline" data-modaal-animation="fade" class="modaal">Show</button>

<div id="inline" style="display:none;">
  <p>Inline content goes here...</p>
  <button type="button" class="close">close the damn thing</button>
</div>

Answer 1

Во-первых, вы должны вызывать модальные методы для родительского элемента. Не на кнопке. Однако из-за некоторой ошибки в скрипте метод hide не работает. Вы можете сделать это как обходной путь

$('.close').click(function(){
  // this is suppose to work although it doesn't
  // $('#inline').modaal('hide');
  
  $('.modaal-inner-wrapper').trigger('click');
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.min.css" integrity="sha256-uXhoVqsazfMtamqLl8uOpYKcZ7bRUZWDmoLcPOpeApw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/js/modaal.min.js" integrity="sha256-e8kfivdhut3LQd71YXKqOdkWAG1JKiOs2hqYJTe0uTk=" crossorigin="anonymous"></script>

<button data-modaal-content-source="#inline" data-modaal-type="inline" data-modaal-animation="fade" class="modaal">Show</button>

<div id="inline" style="display:none;">
  <p>Inline content goes here...</p>
  <button type="button" class="close">close the damn thing</button>
</div>

Answer 2

Пример:

$(function() {
  $("#btnClosePopup").click(function() {
    $("#MyPopup").modal("hide");
  });
});

<!-- Bootstrap -->
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />
<!-- Bootstrap -->
<center>
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#MyPopup">
        Open Modal</button>
</center>
<!-- Modal Popup -->
<div id="MyPopup" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
                    &times;</button>
        <h4 class="modal-title">
          Greetings
        </h4>
      </div>
      <div class="modal-body">
        Use the button to close Modal
      </div>
      <div class="modal-footer">
        <input type="button" id="btnClosePopup" value="Close" class="btn btn-danger" />
      </div>
    </div>
  </div>
</div>
<!-- Modal Popup -->