                        課程
                    
                        /前端開發(fā)
                        
                            /Bootstrap
                        
                        /玩轉(zhuǎn)Bootstrap（基礎(chǔ)）

為什么代碼展示的效果，并不是打開前和打開后？

show.bs.modal ?和 shown.bs.modal 兩個事件響應(yīng)都在模態(tài)彈出框打開之前，關(guān)閉的兩個事件也是如此，請問有朋友知道是因為什么導(dǎo)致的嗎？

吃天狗的月亮

2017-10-10

源自：玩轉(zhuǎn)Bootstrap（基礎(chǔ)） 8-12

關(guān)注問題我要回答

675

操作

收起

2 回答

coder_monkey
2018-10-30

給你的modal加一個 fade 就好了

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>JavaScript觸發(fā)時的參數(shù)設(shè)置（二）</title>
????<link?rel="stylesheet"?>
</head>
<body>
<button?class="btn?btn-primary"?type="button">點擊我</button>
<div?class="modal?fade"?id="mymodal">
????<div?class="modal-dialog">
????????<div?class="modal-content">
????????????<div?class="modal-header">
????????????????<button?type="button"?class="close"?data-dismiss="modal"><span?aria-hidden="true">&times;</span><span?class="sr-only">Close</span></button>
????????????????<h4?class="modal-title">模態(tài)彈出窗標(biāo)題</h4>
????????????</div>
????????????<div?class="modal-body">
????????????????<p>模態(tài)彈出窗主體內(nèi)容</p>
????????????</div>
????????????<div?class="modal-footer">
????????????????<button?type="button"?class="btn?btn-default"?data-dismiss="modal">關(guān)閉</button>
????????????????<button?type="button"?class="btn?btn-primary">保存</button>
????????????</div>
????????</div><!--?/.modal-content?-->
????</div><!--?/.modal-dialog?-->
</div><!--?/.modal?-->

<script?src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script?src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
????$(function(){
????????$(".btn").click(function(){
????????????$("#mymodal").modal("toggle");
????????});
????????$('#mymodal').on('show.bs.modal',?function?(e)?{
????????????alert("在show方法調(diào)用時立即觸發(fā)（尚未顯示之前）；如果單擊了一個元素，那么該元素將作為事件的relatedTarget屬性");
????????});
????????$('#mymodal').on('shown.bs.modal',?function?(e)?{
????????????alert("該事件在模態(tài)彈出窗完全顯示給用戶之后（并且等CSS動畫完成之后）觸發(fā)；如果單擊了一個元素，那么該元素將作為事件的relatedTarget事件");
????????});
????????$('#mymodal').on('hide.bs.modal',?function?(e)?{
????????????alert("在hide方法調(diào)用時（但還未關(guān)閉隱藏）立即觸發(fā)");
????????});
????????$('#mymodal').on('hidden.bs.modal',?function?(e)?{
????????????alert("該事件在模態(tài)彈出窗完全隱藏之后（并且CSS動畫漂完成之后）觸發(fā)");
????????});
????});
</script>
</body>
</html>