[Bootstrap] Modal 提示視窗

 一般網頁在回傳訊息的時候，經常會使用alert('提示訊息');的方式顯示想告知使用者的訊息，那當今天如果對提示的需求變得比較複雜時，比如說想自訂按鈕，以及設定點擊按鈕後觸發的function之類的，這時我覺得單純alert()就會變得不敷使用了。我推薦可以用Bootstrap的 Modal 來實作需求會更方便，Modal 其實使用上並不複雜，且可以高度自由發揮，此編文章先簡單介紹使用方法，之後有機會再介紹更進階的用法。

參考官網

實作:

1.在view 貼上 Modal

<div class="modal" tabindex="-1" role="dialog" id="MyModal">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">Modal title</h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                </button>

            </div>

            <div class="modal-body">

                <p>Modal body text goes here.</p>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-primary">Save changes</button>

                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>

2.script 設定開啟Modal的function

function OpenModal() {
            $('#MyModal').modal('show');
        }

3.建立開啟Modal的按鈕

<button class="success" onclick="OpenModal()">開啟Modal按鈕</button>

4.結果

ps:隱藏modal function

 function CloseModal() {
            $('#MyModal').modal('hide');
        }