Question

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

例如：

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

网址为example.com?offer=1234或example.com/offer1234的网站的访问者会看到常规的example.com网站，但在网页加载时会在顶部显示一个特殊模式。

无法想办法做到这一点。

Answer 1

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

在声明模式的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>

你可以根据需要调整if语句，如果你只想测试其中一个url模式，那么只排除双管符号||（OR）两侧的一个语句，{{1} }定义一个div，用你要显示的模态内容（例如myModal）。

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

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

Answer 2

您可以检查网址是否有＆＃34; offer＆＃34;或不隐藏/显示模态

var hasParam = window.location.href.indexOf('offer');

if(hasParam) {
   $('#aModal').show();
} else {
  $('#aModal').hide();
}

<div id="aModal" class="modal"> </div>

仅当URL具有某些参数时才显示引导模式

2 个答案: