bootstrap modal点击div出现一次

问题描述：

我已经使用bootstrap模式，所以当我点击div模式弹出。但是，点击关闭时，如果我点击div，模式不会再弹出。只是想知道我该如何做到这一点。bootstrap modal点击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'); 
});

看起来在这里很好：http://jsfiddle.net/b501uat6/ – user1012181

@ user1012181那是因为你增加了第二个div id为= “userdiv”。 –

你的代码有没有限制？为什么不使用数据属性选项？像：http://www.bootply.com/Dm1LweDUAQ –

答

你应该将你的<div id="userdiv">...</div>，这样，你的<div class="modal fade>...</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的版本也可以。非常感谢所有人的迅速反应。 – doohsam

很高兴帮助！ –

答

这应该没有任何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。虽然有了这个回应，但似乎这只会在单击CLICK EXPRESSLY ON THE TEXT时才起作用。我如何得到这个工作，所以点击div中的任何地方运行模态？ – doohsam

如果你点击'div'上的任何地方，它就会工作 – user1012181

bootstrap modal点击div出现一次

相关推荐