在“ mfp-close”中以清晰的形式显示弹出式窗口

Question

I am trying to clear all the errors and make input values blank on closing of magnific popup.

I inspected the class of 'close' button and tried to fire jquery event but it is not working.

$("button.mfp-close").on('click',function(){
  console.log("Closed");
});

When i click on mfp-close then there is no log in console.

HTML snippet is:

    <div class="mfp-content"><div id="customdesign" class="white-popup mfp-with-anim">
    <div class="row">
        <div class="col-sm-12 text-center"> 
        <h3>Upload Your Design</h3>
        <p><span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
        </p><form novalidate="novalidate" class="form cmxform" id="customForm">
        <input name="leave" value="http://" type="hidden">
        <input name="isblank" value="" type="hidden">
        <div class="form-group">
        <label class="sr-only">Name</label>
        <input aria-required="true" class="form-control" name="nam_cst" id="nam_cst" 
     placeholder="Enter Name.." required="" type="text">
        <span class="help-block" style="color:red"></span>
     </div>
    </form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp- close">×</button>       
</div></div>

How can we handle this operation??

Answer 1

First of all, if you are using bootstrap framework, use bootstrap modal instead magnific popup, no need for extra js librabry, you can achieve same with bootstrap modal

in your HTML, button you have class="mfp- close" it should be class="mfp-close" as you are binding it like this $("button.mfp-close")

To reset form on pop-up close, you can achieve it with $('form')[0].reset();

Script

$("button.mfp-close").on('click',function(){
    alert("Closed");
    $('form')[0].reset();
});

HTML

<a class="popup-modal" href="#customdesign">Open modal</a>

<div class="mfp-content">
<div id="customdesign" class="white-popup-block mfp-hide">
<div class="row">
    <div class="col-sm-12 text-center"> 
        <h3>Upload Your Design</h3>
        <p>
            <span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
        </p>
        <form novalidate="novalidate" class="form cmxform" id="customForm">
        <input name="leave" value="http://" type="hidden">
        <input name="isblank" value="" type="hidden">
        <div class="form-group">
            <label class="sr-only">Name</label>
                <input aria-required="true" class="form-control" name="nam_cst" id="nam_cst" placeholder="Enter Name.." required="" type="text">
                <span class="help-block" style="color:red"></span>
        </div>
        </form>
    </div>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>       
</div>
</div>

Working fiddle example