treb treb - 4 months ago 24
CSS Question

Modal dialog doesn't show

I've made a modal with the help of javascript. How come the modal doesn't come out? These are my codes:

<button class="jobview-control btn-primary jobview-btn" id="btn-show-modal">Recommend</button>

<div class="modal hide" id="dialog-box">
<div class="modal-header">
<h2>Header</h2>
</div>
<div class="modal-body">
<p>body body body</p>
</div>
<div class="modal-footer">
<p>this is the Footer.</p>
</div>
</div>

<script type="text/javascript">
$(function(){
$("#btn-show-modal").click(function(e){
e.preventDefault();
$("#dialog-box").modal('show');
});
});
</script>

Answer

Just add to your button the following two attributes data-target="#dialog-box" and data-toggle="modal" and it will work :

<button data-target="#dialog-box" data-toggle="modal" class="jobview-control btn-primary jobview-btn" id="btn-show-modal" >Recommend</button>

Hope this helps.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<button data-target="#dialog-box" class="jobview-control btn-primary jobview-btn" id="btn-show-modal" data-toggle="modal">Recommend</button>


<div class="modal fade" id="dialog-box">
  <div class="modal-header">
    <h2>Header</h2>
  </div>
  <div class="modal-body">
    <p>body body body</p>
  </div>
  <div class="modal-footer">
    <p>this is the Footer.</p>
  </div>
</div>

Comments