Question

我在弹出窗口中有一个嵌入式表单。

出现弹出窗口，然后在填写表单后，出现成功消息“谢谢您的订阅” 。

我要实现的是在检测消息时，应通过js自动单击ID为#buttonidclose的弹出窗口的关闭按钮。

这是html：

<div id="popmake-9255" class="pum-container popmake theme-3633 pum-responsive pum-responsive-medium responsive size-medium active custom-position" style="min-width: 0%; max-width: 100%; top: 175px; left: 683.688px; opacity: 1;">
   <div class="pum-content popmake-content">
      <p>
         <!-- Begin Mailchimp Signup Form -->
      </p>
      <div id="mc_embed_signup">
         <form action="https://lbs.us15.list-manage.com/subscribe/post?u=ab37ecab7ff05893ae4a5b4fa&amp;id=d918d8cb05" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate">
            <input type="hidden" name="pum_form_popup_id" value="9255">
            <div id="mc_embed_signup_scroll">
               <h2>Subscribe to download our brochure</h2>
               <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
               <div class="mc-field-group">
                  <label for="mce-EMAIL">Email Address  <span class="asterisk">*</span><br>
                  </label><br>
                  <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" aria-required="true">
               </div>
               <div class="mc-field-group">
                  <label for="mce-FNAME">First Name  <span class="asterisk">*</span><br>
                  </label><br>
                  <input type="text" value="" name="FNAME" class="required" id="mce-FNAME" aria-required="true">
               </div>
               <div class="mc-field-group">
                  <label for="mce-LNAME">Last Name </label><br>
                  <input type="text" value="" name="LNAME" class="" id="mce-LNAME">
               </div>
               <div class="mc-field-group size1of2">
                  <label for="mce-PHONE">Phone Number  <span class="asterisk">*</span><br>
                  </label><br>
                  <input type="text" name="PHONE" class="required" value="" id="mce-PHONE" aria-required="true">
               </div>
               <div id="mce-responses" class="clear">
                  <div class="response" id="mce-error-response" style="display:none"></div>
                  <div class="response" id="mce-success-response" style="display:none"></div>
               </div>
               <p>
                  <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
               </p>
               <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ab37ecab7ff05893ae4a5b4fa_d918d8cb05" tabindex="0" value=""></div>
               <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-primary"></div>
            </div>
         </form>
      </div>
      <p>
         <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[4]='PHONE';ftypes[4]='phone';}(jQuery));var $mcj = jQuery.noConflict(true);</script><br>
         <!--End mc_embed_signup-->
      </p>
   </div>
   <button type="button" class="pum-close popmake-close" aria-label="Close">
   ×            </button>
</div>

请指导我。

Answer 1

我建议使用MutationObserver API。

还可以看看browser support for this api

if ($('.pum-overlay').length > 0) {

    // the mutationobserver api needs a DOM node, not a jquery object. 
    // You can access the node by appending [0] to the jquery call.
    var targetNode = $('.pum-overlay')[0];
    var config = { childList: true, subtree: true};


    var callback = function (mutationsList, observer) {
        for (var mutation of mutationsList) {
            if ($('#mce-success-response').text().indexOf('Thank you for subscribing!') >= 0 ) { 
                $('.pum-close').trigger('click');
            }
        }
    };

    var observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
}

从Mozilla示例中提取并修改的

代码

Answer 2

您可以做的是使用boolean变量使变量默认为false，并在填写表单时将其值更改为true，然后启动函数

function ClickClose (){
while (variable == true){
//    change class name here
}
}

您可能会用另一种方式来做，因为您可能会喜欢...

Javascript检测文本，然后单击弹出窗口的关闭按钮

2 个答案: