CSS仿iOS彈出框是一種常用的UI設計,它在網頁中模擬iOS設備上的提示框,給用戶帶來良好的使用體驗。下面是一段具體的CSS代碼:
.popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; background-color: #fff; border-radius: 5px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); z-index: 999; padding: 20px; } .popup .title { font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 10px; } .popup .content { font-size: 16px; line-height: 1.5; text-align: center; margin-bottom: 20px; } .popup .btn-box { display: flex; justify-content: center; } .popup .btn-box button { background-color: #007aff; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; margin: 0 10px; cursor: pointer; outline: none; } .popup .btn-box button:hover { background-color: #0066cc; }
這段代碼定義了一個類名為popup的元素,它的樣式包括位置、大小、背景色、邊框效果等。其中,將該元素固定在頁面中央,使用了經典的transfrom和top、left屬性組合方式。該元素下有三個子元素,分別對應標題、內容和按鈕區域。這些子元素的文字樣式和布局也都通過相應的CSS樣式屬性來實現。