jQuery Modal trigger on close-CodePudding

I'm using https://github.com/kylefox/jquery-modal to build some modals and would like to trigger the closing event. I'm tried the example on GitHub but unfortunately it doesn't work:

 //open modal
    $('#btn').click(function() {
        $('#login-form').modal({
            showClose: false
        });
        $(this).fadeOut();
    })
    //trigger close
    $('#login-form').on($.modal.BEFORE_CLOSE, function(event, modal) {
      alert("hh");
    });

thanks.

CodePudding user response：

You always have only one active modal so you can use $.modal.close();

$(function () {
    $('button[data-modal]').on('click', function () {
        $($(this).data('modal')).modal(
                {
                    showClose: false
                });
        $(this).fadeOut();
        setTimeout(function(){
          console.log("Triggering BEFORE_CLOSE event");
          //Trigger event
          //Try triggering $.modal.CLOSE
          $('#login-modal').trigger($.modal.BEFORE_CLOSE);
        }, 1000);
    });
    //Creating an event
    //Make sure that element with id login-modal is present
    $('#login-modal').on($.modal.BEFORE_CLOSE, function (event, modal) {
        console.log("before close event");
    });  
    $('.modalManualClose').on("click", function (event, modal) {
        console.log("Close and trigger close event");
        $.modal.close();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<button type="button" data-modal="#login-modal">TEST Button</button>
<div id="login-modal" >
    My cool modal
    <button >Close me when you want</button>
</div>

CodePudding user response：

$('#login-form').on($.modal.BEFORE_CLOSE, function(event, modal) {
  alert("closing modal");
});

.modal {
display: none;
background-color: #ececec;
}

p {
margin: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>

<a href="#login-form" rel="modal:open">Login</a>

<div id="login-form"  >
  <p>A bunch of content can go here</p>
</div>