关闭模态后如何完全退出它

Question

我的页面中有这个模型，它工作正常，但是当我关闭它时，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

Answer 1

我想知道为什么您必须使用 <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>

Answer 2

有一个单独的功能来打开和关闭模态会很好，

function openModal() {
  modal.style.display = "block";
}

function closeModal() {
  modal.style.display = "none";
}

因此，将上述所有内容结合在一起的代码应该是这样的：

// This removes hash
function removeHash() { 
  history.pushState('', document.title, window.location.pathname + window.location.search);
}
    
function openModal() {
  modal.style.display = 'block';
}

function closeModal() {
  modal.style.display = 'none';
  removeHash();
}

var modal = document.getElementById('myModal');
var btn = document.getElementById('adm');
var span = document.getElementsByClassName('close')[0];

btn.onclick = openModal;    
span.onclick = closeModal;    
window.onclick = function(event) {
  if (event.target == modal) {
    closeModal();
  }
} 

Answer 3

将<a href=""></a>添加到关闭按钮