Иное действие во время закрытия модалки bootstrap при условии

173

18 июня 2019, 16:00

есть стандартная модалка bootstrap, есть кнопка next которая должна закрывать модалку, но при закрытии модалки нужно производить определённые действия (очищать внутреннюю форму), а при нажатии кнопки next, форма не должна очищаться. Может как то вешать дата атрибут на кнопку и проверять его во время ивента hide.bs.modal? Всё что придумал - проверил, сюда решил обратиться, т.к уже крайний случай. Спасибо

Добавить кнопку для отчистки формы не вариант, от этого решения и пытаюсь уйти.

Проблему решил навесив дата при нажатии на кнопку next:

$('#next-button').on('click', function () {
   $(this).data('clicked', true);
});

И при евенте закрытия модалки проверял дата:

$('#myModal').on('hidden.bs.modal', function () {
   if ( $('#next-button').data('clicked') ) {
        console.log('not clean');
   } else {
        console.log('clean');
   }
});

Answer 1

Например:

// $('#exampleModal').on('hide.bs.modal', function (e) { 
//   $(this).find('form')[0].reset(); 
// }); 
 
$('#next').on('click', function(){ 
   
  $('#exampleModal').modal('hide'); 
  alert('next'); 
}); 
 
$('#close, #exampleModal .close').on('click', function(){ 
   
  $('#exampleModal').modal('hide'); 
  $('#exampleModal').find('form')[0].reset(); 
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>   
 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
  Launch demo modal 
</button> 
 
<!-- Modal --> 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
  <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
          <span aria-hidden="true">&times;</span> 
        </button> 
      </div> 
      <div class="modal-body"> 
        <form> 
          <div class="form-group"> 
            <label for="exampleInputEmail1">Email address</label> 
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> 
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
          </div> 
          <div class="form-group"> 
            <label for="exampleInputPassword1">Password</label> 
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
          </div> 
          <div class="form-group form-check"> 
            <input type="checkbox" class="form-check-input" id="exampleCheck1"> 
            <label class="form-check-label" for="exampleCheck1">Check me out</label> 
          </div> 
          <button type="submit" class="btn btn-primary">Submit</button> 
        </form> 
      </div> 
      <div class="modal-footer"> 
        <button id="close" type="button" class="btn btn-secondary">Close</button> 
        <button id="next" type="button" class="btn btn-success">NEXT</button> 
      </div> 
    </div> 
  </div> 
</div>