仅当 URL 具有特定参数时才显示引导模式

Show bootstrap modal only if URL has certain parameters

本文关键字：显示 模式 参数 URL 仅当      更新时间：2023-09-26

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

例如：

带有 URL 的访问者 ： example.com看不到模态。他们只看到常规网站。

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

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

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

将此 javascript 代码插入声明模态的div 之后的某个位置，通常最好在结束 </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） 两侧的一个语句，并且其中 myModal 定义了一个带有要显示的模态内容的div（例如。 <div id="myModal"></div> ）。

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

更新 我还为您整理了一个工作 Plunker，演示：http://run.plnkr.co/yEBML6nxvxKDf0YC/?offer=1234

您可以检查 URL 是否有"报价"以隐藏/显示模式 

var hasParam = window.location.href.indexOf('offer');
if(hasParam) {
   $('#aModal').show();
} else {
  $('#aModal').hide();
}
<div id="aModal" class="modal"> </div>
相关文章：