时间戳

首页 > 解决方案 > 关闭模式后如何完全退出模式

javascript - 关闭模式后如何完全退出模式

问题描述

我的页面中有这个模型，它工作正常，但是当我关闭它时，url 仍然有它的名字，比如#modalname。这是我的代码：

<script>

var modal = document.getElementById("myModal");
var btn = document.getElementById("adm");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
} 

</script>

这是html代码：

<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
              <center>
                <label style="font-size: 25px; color:#2193b0;"><i class="fas fa-lock"></i>Enter Admin Password to access Admin Section</label>
              <br><br>
            <input type="password" id="password" name="" class="input-text"  autocomplete="off" style="width:500px;height: 50px;">
            <br>
            <a href="./admin/index.php" onclick="javascript:return validatePass()"><button class="button" name="check"><span>GO</span></button></a>
            <br></center>

</div>
</div>

这是我访问模式的方式：

<li id="adm"><i class="fas fa-lock"></i><a href="#myModal">Admin</a></li>

这是我的网址在我关闭后的样子：

http://localhost/project/index.php#myModal

标签： javascripthtml

解决方案

我想知道为什么你必须使用 <a href="#myModal> 来打开模式，只需用按钮替换它：

<li id="adm"><i class="fas fa-lock"></i><button>Admin</button></li>

如果您不想使用按钮，因为它是默认样式，您可以尝试使用<span>标签：

<li id="adm"><i class="fas fa-lock"></i><span style="cursor:pointer">Admin</span></li>

对于<a>标签：

<li id="adm"><i class="fas fa-lock"></i><a role="button">Admin</a></li>

推荐阅读