javascript - bootstrap模态点击div出现一次

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