Question

我正在尝试从按钮启动模态登录窗口。我做了一些故障排除和模式工作，直到我放置一个无序列表，其中包含指向我网站上另一个页面的链接。

在index.html上时，模态按钮会将我带到about.html页面。当在该页面上并再次单击模态按钮时，模态仅闪烁，但不会保持可见。

这是我的HTML：

<nav>
    <ul class="navMenu">
      <li><a href="index.html">Home</li>
      <li><a href="about.html">About</li>
    </ul>
    <ul class="userAccount">
      <button id="myBtn"><i class="material-icons md-48 md-light">account_circle</i></button>
      <div id="myModal" class="modal">
        <div class="modal-content">
          <span class="close">&times;</span>
          <p>
            Some text in the modal...
          </p>
          <script src="js/userLoginModal.js"></script>
        </div>
      </div>
    </ul>
</nav>

这是我的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.onclick = function() {
    modal.style.display = "block";
}

// 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";
    }
}

Answer 1

您没有关闭a代码，因此从<a href="index.html">到下一个</a>或文档末尾的所有内容都放在链接中。

关闭a代码：

<li><a href="index.html">Home</a></li>
<!--                         ^^^^  -->

同样适用于文档中的其他a标记。

Answer 2

这是完成任务的简单方法。希望它有所帮助！

function toggleOverlay(){
        var overlay = document.getElementById('overlay');
        var modal = document.getElementById('myModal');
        overlay.style.opacity = .6;
        if(overlay.style.display == "block"){
            overlay.style.display = "none";
            modal.style.display = "none";
        } else {
            overlay.style.display = "block";
            modal.style.display = "block";
        }
    }

div#overlay {
            display: none;
            z-index: 2;
            background: #000;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            text-align: center;
        }
        div#myModal {
            display: none;
            position: relative;
            z-index: 3;
            margin: 150px auto 0px auto;
            width: 400px;
            height: 200px;
            background: #FFF;
            color: #000;
        }
        div#wrapper {
            position:absolute;
            top: 0px;
            left: 0px;
            padding-left:24px;
        }

<div id="overlay"></div>

<div id="myModal">
    <p>Some text in the modal... ...</p>
    <button onmousedown="toggleOverlay()">Close</button>
</div>
<div id="wrapper">
        <ul class="navMenu">
            <li><a href="index.html">Home</li>
            <li><a href="about.html">About</li>
        </ul>
    <button onmousedown="toggleOverlay()">account_circle</button>
</div>

为什么我的函数调用我网站的另一个页面而不是我的模态？

2 个答案: