Question

我使用从w3school获得的模式，并对其进行了修改以在同一页面上放置多个模式。

我想知道是否可以使这些模式生成它们自己的链接。示例：我打开模式4，页面链接将更改为mywebsite.com/modal4

我使用的代码或多或少是这样的

JS

// Get the modal
var modal = document.getElementsByClassName('modal');

// Get the button that opens the modal
var btn = document.getElementsByClassName("myBtn");


// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");

// When the user clicks the button, open the modal 
btn[0].onclick = function() {
    modal[0].style.display = "block";
}

btn[1].onclick = function() {
    modal[1].style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span[0].onclick = function() {
    modal[0].style.display = "none";
}

span[1].onclick = function() {
    modal[1].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";
    }
}

HTML

<h2>Modal Example1</h2>

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

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">×</span>
    <p>Some text in the Modal..1</p>
  </div>

</div>


<h2>Modal Example2</h2>

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

<!-- The Modal -->
<div id="myModal2" class="modal">

  <!-- Modal content -->
  <div class="modal2-content">
    <span class="close">×</span>
    <p>Some text in the Modal..2</p>
  </div>

</div>

Answer 1

您可以在打开模式时更改页面的当前URL，如以下答案所示：Modify the URL without reloading the page。如果要访问mywebsite.com/modal4来加载模式，可以编写一些js逻辑来获取链接，查看其是否解决了模式，然后打开该模式。

您可能必须编写一些后端代码来处理类似的链接，但是，您可以尝试传递链接参数，然后使用js从链接字符串中解析参数：How to get the value from the GET parameters?

正如JagdeeshKumar在下面指出的那样，您还可以导航到website.com/htmlpage.html#modal4，并且可以使用js获取该位置并加载模态。参见https://www.w3schools.com/jsref/prop_loc_hash.asp

Answer 2

您可以使用

您的URL类似于root /＃modal4window.location.hash ='something';

带链接的模态

2 个答案: