javascript - 在放大的弹出窗口中清除 `mfp-close` 上的表格

Question

我正在尝试清除所有错误，并在关闭大型弹出窗口时将输入值设为空白。

我检查了“关闭”按钮的类并尝试触发 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>

我们如何处理这个操作？

Answer 1

首先，如果您使用的是bootstrap框架，请使用bootstrap modal而不是放大的弹出窗口，不需要额外的js库，您可以使用bootstrap modal实现相同的效果

在您的 HTML 中，您有 class="mfp-close" 按钮，它应该是 class="mfp-close"，因为您像这样绑定(bind)它 $("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>

Working fiddle example