通过URL直接链接到打开的模态窗口？

Question

我对编码并不了解，希望我的问题描述没错。

我想要的是链接一个人到另一个网站上的特定模态窗口。在这个例子中，我将使用Menards周广告说明我想做什么。

我想要直接链接到每周传单页面，并打开一个特定产品的模态窗口，例如$74.99的5层货架单位，选择后会打开此窗口(http://i.imgur.com/lntNUpK.png)。我想要直接链接到这个窗口。

是否有一种方法可以修改URL使这成为可能？我知道如何链接到URL的特定页面，它看起来像这样/main/flyer.html?page=5

还有一件事情要提到的是，如果您访问提供广告的网站Flipp，它确实允许您直接链接到窗口https://flipp.com/item/175356457-muscle-rack-5shelf-steel-unit

感谢任何帮助！

- Ryan

Answer 1

使用一些JavaScript是可以实现的，它会在URL中寻找#myModal，如果找到它，就会加载模态框：

只需在页面末尾添加以下代码：

$(document).ready(function() {

  if(window.location.href.indexOf('#myModal') != -1) {
    $('#myModal').modal('show');
  }

});

现在只需使用以下 URL：

http://www.mywebsite.com/page.html#myModal

* 您的模态框必须有一个 ID：

<div class="modal" id="myModal">

- rimba

---

如果我有许多带有不同ID的模态框，如何通过URL打开它们而不需要每次都复制粘贴代码？ - Mattia Del Franco

Answer 2

这怎么样？

function openModalOnHash() {
  if(window.location.hash) {
    var hash = window.location.hash.substring(1);
    $('#'+hash).modal('show');
  }
}

$(document).ready(function() {
  openModalOnHash()
});

- gkemperle

Answer 3

是的，你可以在URL上捕获获取参数，https://www.exampleurl.com/?param=ModalIdShow

// Start Page 
$(function(){
  var param = GetURLParameter('param');
  if(param == 'ModalIdShow'){
    $("#ModalIdShow").modal("show");
  }
});

//Catch param 
function GetURLParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) 
{
    var sParameterName = sURLVariables[i].split('=');
    if (sParameterName[0] == sParam) 
    {
        return sParameterName[1];
    }
}
}

- Magdiel Ramirez

Answer 4

我相信这应该可以工作。只有在URL中指定了特定的ID时，才会打开模态框（如果存在）。

$(document).ready(() => {
    const href = window.location.href
    const modalID = href.split('/').reverse()[0]
    if(modalID){
        $(modalID).modal('show')
    }
  })

- Olamigoke Philip