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而不是magnific popup，不需要额外的js librabry，你可以用bootstrap模式实现相同的

在您的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>

Working fiddle example

清晰的形式在'mfp-close`中放大弹出

1 个答案: