引导模式点击 div 出现一次答案

【问题标题】：bootstrap modal click on div appears once引导模式点击 div 出现一次
【发布时间】：2015-04-23 01:52:48
【问题描述】：

我使用了引导模式，因此当我单击 div 时，模式会弹出。但是，在单击关闭时，如果我再次单击 div，则模式不会再次弹出。只是想知道我怎么能做到这一点。

HTML：

<div class="col-sm-3 col-lg-3" id="userdiv">
    <div class="modal fade " data-backdrop="false">
      <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>

              </div>
          </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JS：

var $modal = $('.modal').modal({
    show: false 
});
$('#userdiv').on('click', function() {
    $modal.modal('show');
});

【问题讨论】：

这里看起来不错：jsfiddle.net/b501uat6
@user1012181 那是因为你添加了第二个 id="userdiv" 的 div。
你的代码有什么限制吗？为什么不使用数据属性选项？喜欢：bootply.com/Dm1LweDUAQ
我不想使用按钮，只是为了让用户点击div区域。

标签： javascript html twitter-bootstrap

【解决方案1】：

这应该可以在没有任何 JS 的情况下工作

jsFiddle：http://jsfiddle.net/b501uat6/1/

<div class="col-sm-3 col-lg-3" id="userdiv" data-toggle="modal" data-target="#myModal"> CLICK EXACTLY ON THE TEXT
    <div class="modal fade " id='myModal' data-backdrop="false">
      <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>

              </div>
          </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

【讨论】：

感谢您的快速回复。我会尝试让页面只使用 HTML。尽管有了这个响应，这似乎只有在单击“完全点击文本”时才会起作用。如何让它工作，以便单击 div 中的任意位置运行模式？

【解决方案2】：

您应该将<div class="modal fade>...</div> 移到<div id="userdiv">...</div> 之外，这样.click() 函数将被正确捕获并打开模态：

<div class="col-sm-3 col-lg-3" id="userdiv">
  <h4>User Div</h4>
</div>

<div class="modal fade " data-backdrop="false">
  <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>

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

请参阅此bootply 以获取示例。

【讨论】：

这个版本对我有用。虽然我想在没有 JS 的情况下也能获得该版本。非常感谢大家的快速响应。