html - 页面上有两个模态窗口 - 但只显示一个

Question

我不确定为什么会这样。我使用两个单独的模态和两个单独的脚本来识别两个单独的类。第一个是“特价”模式窗口，第二个是“紧急”模式窗口。然而，当我单击“特价商品”链接时，“紧急”模式窗口会打开。当我单击紧急模型窗口时，它可以正常打开。如何解决此问题以使其按预期工作？提前感谢你的帮助。

第一个模态窗口的 HTML 和 JQUERY

                <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                   <div class="flipper">
                      <div class="front_03">
                         <img src="./images/free.png">
                      </div>
                      <div class="back_03">
                         <a class="button-to-click" href="#">
                            Blah...Blah..
                            Blah...Blah..<br />
                            [ CLICK HERE ]
                         </a>
                      </div>
                   </div>
                </div>

                <div class="popup-container">
                   <div class="specials_title">BLAH TITLE</div>
                   <p>Blah...Blah...Blah...</p>
                   <div class="coupon_container">
                      <p><div class="fa fa-star checked"></div> Blah.. Blah..</p>
                      <p><div class="fa fa-star checked"></div> Blah.. Blah..</p>
                      <p><div class="fa fa-star checked"></div> Blah.. Blah..</p>
                      <p><div class="fa fa-star checked"></div> Blah.. Blah..</p>
                   </div>
                   <a class="popup-close closer" href="#">X</a>
                </div>

                <script>
                   $(document).ready(function() {
                      // config
                      popup = $('.popup-container');
                      clickme = $('.button-to-click');

                      // pop-up
                      vh = $(window).height();
                      vw = $(window).width();
                      bw = popup.width();
                      bh = popup.height();
                      clickme.click(function(e) {
                         e.preventDefault();
                         popup.fadeOut();
                         popup.css('left', vw/2 - bw/2);
                         popup.css('top', vh/2 - bh/2);
                         popup.fadeIn();
                      });
                      //close button
                      $('.popup-close').click(function() {
                         $('.popup-container').fadeOut();
                      });
                   });
                </script>

第二个模态窗口的 HTML & JQUERY

                <div class="co_R_content">
                   <button type="button" class="click_emergency">
                      <div class="led-content">CLICK HERE</div>
                      <div class="led-box">
                         <div class="led-red"></div>
                      </div>
                   </button>
                </div>

                <div class="popup-container popup-emergency">
                   <div class="emergency_title">EMERGENCY?</div>
                   <p>Blah...Blah...Blah...</p>
                   <div class="entry-content">
                      <div class="wpforms-container">
                         <form id="wpforms-form">
                            <--- WPForms HTML Goes Here --->
                         </form>
                      </div>  <!-- .wpforms-container -->   
                   </div><!-- .entry-content -->
                      
                   <a class="popup-close closer closer2" href="#">X</a>
                </div>

                <script>
                   $(document).ready(function() {
                      // config
                      popup = $('.popup-emergency');
                      clickme = $('.click_emergency');

                      // pop-up
                      vh = $(window).height();
                      vw = $(window).width();
                      bw = popup.width();
                      bh = popup.height();
                      clickme.click(function(e) {
                         e.preventDefault();
                         popup.fadeOut();
                         popup.css('left', vw/2 - bw/2);
                         popup.css('top', vh/2 - bh/2);
                         popup.fadeIn();
                      });
                      //close button
                      $('.popup-close').click(function() {
                         $('.popup-emergency').fadeOut();
                      });
                   });
                </script>

标签： htmljquerymodal-window

Answer 1

将第二个脚本中的变量从 popup & clickme 重命名为不同的名称，这样就成功了。

从：

            <script>
               $(document).ready(function() {
                  // config
                  popup = $('.popup-emergency');
                  clickme = $('.click_emergency');

                  // pop-up
                  vh = $(window).height();
                  vw = $(window).width();
                  bw = popup.width();
                  bh = popup.height();
                  clickme.click(function(e) {
                     e.preventDefault();
                     popup.fadeOut();
                     popup.css('left', vw/2 - bw/2);
                     popup.css('top', vh/2 - bh/2);
                     popup.fadeIn();
                  });
                  //close button
                  $('.popup-close').click(function() {
                     $('.popup-emergency').fadeOut();
                  });
               });
            </script>

至：

            <script>
               $(document).ready(function() {
                  // config
                  popup2 = $('.popup-emergency');
                  clickme2 = $('.click_emergency');

                  // pop-up
                  vh = $(window).height();
                  vw = $(window).width();
                  bw = popup2.width();
                  bh = popup2.height();
                  clickme2.click(function(e) {
                     e.preventDefault();
                     popup2.fadeOut();
                     popup2.css('left', vw/2 - bw/2);
                     popup2.css('top', vh/2 - bh/2);
                     popup2.fadeIn();
                  });
                  //close button
                  $('.popup-close').click(function() {
                     $('.popup-emergency').fadeOut();
                  });
               });
            </script>