Bootstrap - Modal
因為我們家的設計,很厲害,很會寫CSS跟HTML及Bootstrap。
我已經對Web算熟的人,竟然這份工作第一次碰到Modal這個東西。
因為太常去網路查如何手動關閉,手動開啟,開啟要做什麼之類的,讓我要做一下筆記
開啟事件的處理
$('.form_modal').on('show.bs.modal', function(e) {
// DO Something
});
關閉事件的處理
$('.form_modal').on('hide.bs.modal', function(e) {
});
手動開啟,手動關閉
$('.form_modal').modal('show');
$('.form_modal').modal('hide');
在HTML下觸發開啟
<button data-toggle="modal" data-target="#Add">新增</button>
在HTML下觸發關閉
<a data-dismiss="modal">取消</a>
參考連結
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
Example
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>