bootstrap модальный щелчок на div появляется один раз

Question

Я использовал bootstrap modal, чтобы при нажатии на 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

Вы должны переместить <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 для примера.

Answer 2

Это должно работать без каких-либо 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 -->