javascript - 仅当 URL 具有某些参数时才显示 Bootstrap 模式

标签 javascript jquery twitter-bootstrap

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

例如:

具有 URL 的站点的访问者:example.com 看不到模态。他们只会看到常规站点。

具有 URL example.com?offer=1234example.com/offer1234 的网站访问者会看到常规的 example.com 网站, 但在页面加载时顶部有一个特殊的模式。

想不出任何方法来做到这一点。

最佳答案

是的,如果查询字符串 (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 模式,并且 myModal 在哪里定义一个包含要显示的模态内容的 div(例如 <div id="myModal"></div> )。

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

更新我还整理了一个可用的 Plunker 供您演示: http://run.plnkr.co/yEBML6nxvxKDf0YC/?offer=1234

关于javascript - 仅当 URL 具有某些参数时才显示 Bootstrap 模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28079380/

相关文章:

javascript - Phonegap 中的点击事件

javascript - 使用 bootstrap,让 slide 上下滚动,而不是左右滚动

javascript - 将下拉菜单放置在菜单标题的正下方

javascript - 没有 hack 或其他路由器的 Backbone.js 和 jQueryMobile 路由

javascript - 动态选择选择项的值 javascript/jquery

javascript - 关闭对全局变量的访问 javascript

javascript - JS 中读取 JSON 到变量时出错

javascript - 如何在 prime ui 或 jquery datatable "columns"选项的 headerText 中包含 HTML 代码?

jquery - 将 jquery $.each 与多个选择器一起使用

html - 如何更改 Bootstrap 的井颜色?