最近開發(fā)一個app頁面,需要在用戶完成某些操作后彈出提示窗口,因此我使用了CSS來實現(xiàn)彈窗效果。
.popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 9999; } .popup .close { position: absolute; top: 10px; right: 10px; font-size: 20px; color: #999; } .popup .title { font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 20px; } .popup .content { font-size: 16px; line-height: 1.5; margin-bottom: 20px; } .popup .btn { display: block; width: 100%; height: 40px; background-color: #4285f4; color: #fff; text-align: center; line-height: 40px; font-size: 16px; border-radius: 5px; text-decoration: none; }
以上是CSS樣式代碼,下面是HTML代碼,用來實現(xiàn)彈窗功能:
使用這個CSS樣式和HTML代碼,可以輕松地實現(xiàn)一個簡單的彈窗效果。其中,popup類代表彈窗容器,close類代表關閉按鈕,title類代表標題,content類代表內容,btn類代表確定按鈕。
上一篇ant no css
下一篇app公共css樣式