Question

我使用了bootstrap模态，这样当我点击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');
});

Answer 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 -->

Answer 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。

bootstrap模态单击div出现一次

2 个答案: