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