摆脱href在模态实现

Question

我使用模态在我的网站上显示信息，因为人们通常这样做。我使用的模态完全是用css编写的(没有jQuery)。当一个链接被点击时，模式显示出来，url改变如下所示:

reminder.local/main.php # patient0

在模态窗口关闭后url变成:

reminder.local/main.php #

问题是，当按下后退键时，它会回到reminder.local/main.php # patient0如预期的那样，模态窗口再次弹出，这是非常不希望的。

如果有什么办法，请告诉我。

模式示例代码:

 <a href="#text2" id="appoint">Next</a>
 <div class="lightbox" id="text2">
              <div class="box">
              <a class="close" href="#">X</a>
                <p class="title">Modal Window with Text</p>
                <div class="content">
                <form>
                  <input type="text" >Name <br>
                  <input type="password">Password <br><br>
                  <input type="submit" value="Submit">
                </form>
                </div>
              </div>
            </div>

Answer 1

如果你根本不想改变url，你可以改变它，让模式从input/label打开，像这样:

input {
    display: none;
}
.lightbox {
    display: none;
  border: solid 1px red;
}
input:checked ~ .lightbox {
    display: block;
}

<input id="appoint" type="checkbox" />
<label for="appoint">Next</label>
<div class="lightbox" id="text2">
    <div class="box"> 
        <label for="appoint">X</label>
        <p class="title">Modal Window with Text</p>
        <div class="content">
            <form>
                <input type="text">Name
                <br>
                <input type="password">Password
                <br>
                <br>
                <input type="submit" value="Submit">
            </form>
        </div>
    </div>
</div>