时间戳

首页 > 解决方案 > 为什么不使用此代码打开此模式。它仍然重定向，但模式没有弹出

javascript - 为什么不使用此代码打开此模式。它仍然重定向，但模式没有弹出

问题描述

我更新了 JS 以显示所有内容。下面的一个答案似乎不适用于我的所有代码。

我正在使用这个 JS

        // Get the modal
    var modal = document.getElementById('myModal');
    
    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks on the button, open the modal
    btn = document.getElementById('myBtn');
    modal = document.getElementById('myModal');
    btn.onclick = function() {
    modal.style.display = "block";
    (function(){
      var countdown = 5;
    
      setInterval(function() {
        countdown--;
        if (countdown >= 0) {
          span = document.getElementById("countdown");
          span.innerHTML = countdown;
        }
        // Display 'counter' wherever you want to display it.
        if (countdown === 0) {
        //    alert('this is where it happens');
            window.location.href= 'https://smb.cyberpolicy.com';
            clearInterval(countdown);
        }
    
      }, 1000);
    
    })();
    
    }
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }
    
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
        <!-- Trigger/Open The Modal -->
    <button id="myBtn">Open Modal</button>
    
    <!-- The Modal -->
    <div id="myModal" class="modal">
    
    <!-- Modal content -->
     <div id="boxes">
         <div class="modal-content">
    
      <div id="dialog" class="window">
                    <span class="close">&times;</span>
        <p style="top-modal-text">In <span id="countdown">5</span> seconds you'll be leaving Hiscox to continue a quote with a trusted partner.</p>
                    <a href="http://smb.cyberpolicy.com/" class="no-external-link"><img alt="Cyber Security Get A Quote" src="https://www.hiscox.com/sites/default/files/images/wysiwyg/getaquote.jpg" style="margin-top: 10px" class="align-left"></a><br>
              <a src="https://www.hiscox.com"><p>Click here to return to Hiscox.com</p></a>
        </div>
      </div>
      <!-- <div id="mask"></div> -->
    </div></div>
    
    </div>

我认为 JS 有问题，但我显然错过了它。

标签： javascriptjquery

解决方案

介绍

你有我修复的三个错误。

前两个是您从未为模式和按钮分配变量。您需要使用document.geteElementById.

另一个错误是从一开始就没有隐藏模式。

在线小提琴：https ://jsfiddle.net/euo4byj2/31/

具体修复

您缺少变量分配：

btn = document.getElementById('myBtn');
modal = document.getElementById('myModal');

您还缺少首先隐藏模式的样式代码：

<div id="myModal" class="modal" style="display:none">

工作代码

  <!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal" style="display:none">

<!-- Modal content -->
 <div id="boxes">
     <div class="modal-content">

    <div id="dialog" class="window">
                <span class="close">&times;</span>
        <p style="top-modal-text">In <span id="countdown">5</span> seconds you'll be leaving Hiscox to continue a quote with a trusted partner.</p>
                <a href="http://smb.cyberpolicy.com/" class="no-external-link"><img alt="Cyber Security Get A Quote" src="https://www.hiscox.com/sites/default/files/images/wysiwyg/getaquote.jpg" style="margin-top: 10px" class="align-left"></a><br>
          <a src="https://www.hiscox.com"><p>Click here to return to Hiscox.com</p></a>
        </div>
    </div>
    <!-- <div id="mask"></div> -->
</div></div>

</div>



<script>
btn = document.getElementById('myBtn');
modal = document.getElementById('myModal');
btn.onclick = function() {
modal.style.display = "block";
(function(){
  var countdown = 5;

  setInterval(function() {
    countdown--;
    if (countdown >= 0) {
      span = document.getElementById("countdown");
      span.innerHTML = countdown;
    }
    // Display 'counter' wherever you want to display it.
    if (countdown === 0) {
    //    alert('this is where it happens');
        window.location.href= 'https://smb.cyberpolicy.com';
        clearInterval(countdown);
    }

  }, 1000);

})();

}


</script>

推荐阅读