我在 javascript 的帮助下制作了一个模式。为什么模态不出来？这些是我的代码:
<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>
只需将以下两个属性添加到您的按钮 data-target="#dialog-box" 和 data-toggle="modal" 即可:
<button data-target="#dialog-box" data-toggle="modal" class="jobview-control btn-primary jobview-btn" id="btn-show-modal" >Recommend</button>
希望这对您有所帮助。
<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>