CSS規則定義對話框通常包括以下幾個部分:
1. 彈框容器
.modal { position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
2. 對話框主體
.modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; width: 80%; height: 80%; overflow: auto; animation-name: zoom; animation-duration: 0.6s; }
3. 關閉按鈕
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }
4. 內容區域
.modal-body { padding: 2px 16px; }
5. 標題
.modal-header { padding: 2px 16px; background-color: #5cb85c; color: white; }
6. 底部按鈕
.modal-footer { padding: 2px 16px; background-color: #5cb85c; color: white; text-align: right; }
以上是定義一個基礎的對話框彈窗的CSS規則,可以根據需要進行調整。
上一篇css控制多余字體隱藏