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'); 
});

來源

2015-04-22 doohsam

看起來在這裏很好：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爲例。

來源

2015-04-22 17:48:15

這個版本適合我。雖然我想要沒有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 -->

來源

2015-04-22 17:52:48 user1012181

感謝您的快速響應。我會試着讓頁面只使用HTML。雖然有了這個迴應，但似乎這隻會在單擊CLICK EXPRESSLY ON THE TEXT時才起作用。我如何得到這個工作，所以點擊div中的任何地方運行模態？ – doohsam

如果你點擊'div'上的任何地方，它就會工作 – user1012181

bootstrap modal點擊div出現一次

回答

相關問題