仅当URL具有某些参数时才显示引导模式 [英] Show bootstrap modal only if URL has certain parameters

问题描述

有没有办法使用Bootstrap的模态功能来评估参数的URL并自动打开模态？

Is there a way using Bootstrap's modal functionality to evaluate the URL for parameters and open the modal automatically?

例如：

访问该网站的网址为： example.com 看不到该模式。他们只看到常规网站。

Visitors to the site with URL : example.com don't see the modal. They just see the regular site.

网址访问者网址 example.com?offer=1234 或 example.com/offer1234 查看常规 example.com 网站，但在页面加载时顶部有一个特殊模式。

Visitors to the site with URL example.com?offer=1234 or example.com/offer1234 see the regular example.com site, but with a special modal over the top when the page loads.

无法想出办法。

推荐答案

是的，当然只有在查询字符串（offer = 1234）或URL（/ offer1234）匹配时才能运行一些JavaScript代码。

Yes, of course this is possible by only running some JavaScript code if the query string (offer=1234) or URL (/offer1234) matched.

插入此javascript代码在声明模态的div之后的某个地方，通常最好在结尾之前添加< / body> 标记：

Insert this javascript code somewhere after the div where your modal is declared, typically best to add just before your ending </body> tag:

<script type="text/javascript">
var url = window.location.href;
if(url.indexOf('?offer=1234') != -1 || url.IndexOf('/offer1234') != -1) {
    $('#myModal').modal('show');
}
</script>

您可以根据需要调整if语句，只排除双管符号两侧的一条语句 || （OR）如果您只想测试其中一个网址模式，并且 myModal 定义了一个div您要显示的模态内容（例如< div id =myModal>< / div> ）。

You can tweak the if statement however you like, exclude only one statement either side of the double pipe symbols || (OR) if you only want to test one of those url patterns, and where myModal defines a div with your modal content to display (eg. <div id="myModal"></div>).

有关更多选项和指南，请参阅文档。
http://getbootstrap.com/javascript/#modals-options

See the documentation for more options and guidelines. http://getbootstrap.com/javascript/#modals-options

更新我还为你演示了一个有效的Plunker：
http://run.plnkr.co/yEBML6nxvxKDf0YC/?offer=1234

Update I have also put together a working Plunker for you demonstrating: http://run.plnkr.co/yEBML6nxvxKDf0YC/?offer=1234

这篇关于仅当URL具有某些参数时才显示引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！