在弹出窗口中清除“mfp-close”的窗体

Clear form on `mfp-close` in magnific popup

本文关键字：mfp-close 窗体 清除 窗口      更新时间：2023-09-26

我试图清除所有的错误，并使输入值空白在关闭的弹出窗口。

我检查了"关闭"按钮的类，并试图触发jquery事件，但它不工作。

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

当我点击mfp-close时，没有登录控制台。

HTML片段为:

    <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>

我们如何处理这个操作??

首先，如果你正在使用bootstrap框架，使用bootstrap modal代替magnific popup，不需要额外的js库，你可以实现同样的bootstrap modal

在你的HTML中，按钮你有class="mfp- close"它应该是class="mfp-close"因为你像这样绑定它$("button.mfp-close")

要在弹出窗口关闭时重置表单，可以使用$('form')[0].reset();

脚本

$("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>

工作小提琴示例

相关文章：