twitter-bootstrap 仅当 URL 具有某些参数时才显示引导模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28079380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show bootstrap modal only if URL has certain parameters
提问by jonmrich
Is there a way using Bootstrap's modal functionality to evaluate the URL for parameters and open the modal automatically?
有没有办法使用 Bootstrap 的模态功能来评估参数的 URL 并自动打开模态？
For example:
例如：
Visitors to the site with URL : example.comdon't see the modal. They just see the regular site.
使用 URL 访问站点的访问者：example.com看不到模态。他们只看到常规站点。
Visitors to the site with URL example.com?offer=1234or example.com/offer1234see the regular example.comsite, but with a special modal over the top when the page loads.
使用 URL 访问站点的访问者example.com?offer=1234或example.com/offer1234查看常规example.com站点，但在页面加载时在顶部显示特殊模式。
Can't figure out any way to do this.
想不出任何方法来做到这一点。
回答by GONeale
Yes, of course this is possible by only running some JavaScript code if the query string (offer=1234) or URL (/offer1234) matched.
是的，当然，如果查询字符串 (offer=1234) 或 URL (/offer1234) 匹配，则可以仅通过运行一些 JavaScript 代码来实现。
Insert this javascript code somewhere after the div where your modal is declared, typically best to add just before your ending </body>tag:
在声明模态的 div 之后的某个位置插入此 javascript 代码，通常最好在结束</body>标记之前添加：
<script type="text/javascript">
var url = window.location.href;
if(url.indexOf('?offer=1234') != -1 || url.IndexOf('/offer1234') != -1) {
$('#myModal').modal('show');
}
</script>
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 myModaldefines a div with your modal content to display (eg. <div id="myModal"></div>).
您可以根据自己的喜好调整 if 语句，||如果您只想测试这些 url 模式之一，则只排除双管道符号(OR)两侧的一个语句，并且 wheremyModal定义了一个带有要显示的模态内容的 div（例如<div id="myModal"></div>）。
See the documentation for more options and guidelines. http://getbootstrap.com/javascript/#modals-options
有关更多选项和指南，请参阅文档。 http://getbootstrap.com/javascript/#modals-options
Update I have also put together a working Plunker for you demonstrating: http://run.plnkr.co/yEBML6nxvxKDf0YC/?offer=1234
更新我还为您准备了一个可以工作的Plunker：http://run.plnkr.co/yEBML6nxvxKDf0YC/?offer=1234
回答by display name
You can check the URL if it has "offer" or not to hide/show the modal
您可以检查 URL 是否有“要约”或不隐藏/显示模式
var hasParam = window.location.href.indexOf('offer');
if(hasParam) {
$('#aModal').show();
} else {
$('#aModal').hide();
}
<div id="aModal" class="modal"> </div>
