jQuery 模態框的開啟關閉事件
阿新 • • 發佈:2018-11-02
以下是Bootstrap 模態框
//模態框的觸發事件
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">發動演示模態框</a></p>
//模態框的實現
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>這是一個模態框標題</h3>
</div>
<div class="modal-body">
<h4>模態框中的文字</h4>
<p>你可以在這新增一些文字。</p>
</div>
<div class="modal-footer">
<a href= "#" class="btn btn-success">喚醒活動</a>
<a href="#" class="btn" data-dismiss="modal">關閉</a>
</div>
</div>
//Bootstrap的引入
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js" ></script>
//模態框關閉事件 模態框id
$('#example').on('hide.bs.modal', function () {
alert('嘿,我聽說您喜歡模態框...');
})
//模態框開啟事件
$('#example').on('show.bs.modal', function () {
alert('嘿,我聽說您喜歡模態框...');
})
擴充套件: style=“z-index:111111” 樣式,在模態框巢狀時使用,以防止模態框出現層級錯亂問題。