工具/材料
Sublime Text
操作方法
首先在HTML5頁面中新增壓縮好後的樣式檔案,如下圖所示,在大多數的專案中一般都會運用壓縮版的CSS檔案
然後在頁面中繼續新增,如下圖所示,這個檔案中定義好了很多常用的指令碼效果
然後我們在body區域定義button按鈕,點選這個按鈕可以出發模態框的彈出,如下圖所示
接下來我們來定義模態框的具體樣式,如下圖所示,通過呼叫modal樣式來宣告模態框。注意模態框的內容將會放在modal-content樣式裡
然後我們就定義模態框的標題,正文和底部內容,如下圖所示,它們的樣式分別是modal-header,modal-body和modal-footer
最後,我們在指令碼標籤script裡通過呼叫modal方法來直接讓模態框彈出,如下圖所示
執行頁面程式以後,如下圖所示的模態框就會呈現在瀏覽器中,它看起來是不是比JavaScript的彈出框更加的漂亮