我在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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句