Не удается открыть модальный с помощью кнопки, если установлено значение on(‘show.bs.modal’)

#jquery #twitter-bootstrap

#jquery #twitter-bootstrap

Вопрос:

У меня есть кнопка для переключения модального и отправки некоторых скрытых значений в модальный on('show.bs.modal', function(e) . Однако модальный не запускается после нажатия кнопки.

https://jsfiddle.net/7cx0zqpj/11/

Ответ №1:

Рабочий пример

 $(document).ready(function(){
  $('#show').click(function(){
    $('#loginForm').modal('show');
  });
  
  $('#loginForm').on('show.bs.modal', function () {
    var val = $('#show').data('id');
    alert(val);
  });

}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<button class="btn btn-primary btn-sm" id='show' data-id="1">Show Modal</button>
<div class="modal fade" id="loginForm" style="box-shadow: 5px 5px 5px grey;" tabindex="-1" role="dialog" aria-labelledby="print_size" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header modal-center-heading">
        <h5 class="modal-title" id="exampleModalLabel">Login</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">amp;times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="empty">

            <input type="email" placeholder="Email" class="input-style" name="">
            <input type="password" placeholder="* * * * * * *" name="" class="input-style">
        </div>
      </div>
      <div class="modal-footer" style="border-width: 0px;">
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="a4Size">Login</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal" id="a4Size">Cancel</button>
      </div>
    </div>
  </div>
</div>