【问题标题】:Bootstrap Modal not displaying on form submit引导模式未显示在表单提交上
【发布时间】:2015-06-24 20:56:50
【问题描述】:

我想在提交表单后显示一个简单的引导模式,显示“您的消息已发送,谢谢”。我正在使用http://formspree.io 来处理表单。根据 formspree.io 上的说明,我在表单中添加了以下 HTML:

<input type="hidden" name="_next" value="//mysite.com/#openmodal" />

这是在提交表单后将用户重定向到我的模式。但是,模式没有显示 - 链接正在重定向回我的主页顶部。

这是模态的 HTML:

<div class="modal fade" id="openmodal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

【问题讨论】:

  • 首先:
  • 如果它不依赖于帖子&lt;button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#openmodal"&gt; 的响应,您可以使用输入或按钮上的“数据目标”属性来显示您的模式,检查此Bootstrap JS
  • 谢谢,我已经添加了缺少的引号,但它仍然不显示。
  • 感谢您的回复。我将如何将 data-target 属性添加到输入标签中的 value 属性?它只需要是 value 属性的 URL。

标签: javascript jquery html forms twitter-bootstrap


【解决方案1】:

如何添加检查以检测 url 中的哈希是否存在,例如:

$(document).ready(function () {
    if (window.location.hash === "#openmodal") {
        $("#openmodal").modal("show");
    }
});

【讨论】:

  • 我将该脚本添加到文档中,但仍然得到相同的结果,它没有加载模式对话框,还有其他想法吗?
  • 浏览器控制台有JS错误吗?
猜你喜欢
相关资源
最近更新 更多
热门标签