在 JavaScript 中,我們常常會使用 alert() 函數來向用戶顯示提示信息。然而,alert() 函數原生的樣式可能稍顯單調。為了更好地呈現用戶提示信息,我們可以通過 CSS 來改變 alert() 的樣式,從而讓它更加美觀、清晰。
以下是一個簡單的 alert() 彈窗,它的樣式還原了原生樣式:
alert('請您輸入正確的手機號碼');
如果我們想自定義 alert() 彈窗的樣式,我們可以使用以下代碼:
function myAlert(msg) { var alertBox = document.createElement('div'); alertBox.id = 'myAlert'; alertBox.innerHTML = ''+msg+'
'; document.body.appendChild(alertBox); } .myAlert { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 999999; } .myAlert p { background-color: #fff; padding: 20px; border-radius: 5px; }
通過以上代碼,我們可以實現一個自定義 alert() 彈窗,它的樣式如下:
myAlert('請您輸入正確的手機號碼');
展示代碼:
function myAlert(msg) { var alertBox = document.createElement('div'); alertBox.id = 'myAlert'; alertBox.innerHTML = ''+msg+'
'; document.body.appendChild(alertBox); } .myAlert { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 999999; } .myAlert p { background-color: #fff; padding: 20px; border-radius: 5px; }
如上所示,我們通過 CSS 的樣式設置,讓 alert() 彈窗的樣式變得更加美觀、清晰。
除了改變 alert() 彈窗的樣式外,我們也可以在彈窗中添加其他元素。例如,我們可以為 alert() 彈窗添加一個“確認”按鈕:
function myAlert(msg, callback) { var alertBox = document.createElement('div'); alertBox.id = 'myAlert'; alertBox.innerHTML = ''+msg+'
'; document.body.appendChild(alertBox); } .myAlert { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 999999; } .myAlert p { background-color: #fff; padding: 20px; border-radius: 5px; } .myAlert button { background-color: #008cff; color: #fff; padding: 10px; border: none; border-radius: 5px; margin-top: 10px; }
通過以上代碼,我們可以實現一個帶“確認”按鈕的 alert() 彈窗,它的樣式如下:
myAlert('請您輸入正確的手機號碼', function() { console.log('確認'); });
展示代碼:
function myAlert(msg, callback) { var alertBox = document.createElement('div'); alertBox.id = 'myAlert'; alertBox.innerHTML = ''+msg+'
'; document.body.appendChild(alertBox); } .myAlert { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 999999; } .myAlert p { background-color: #fff; padding: 20px; border-radius: 5px; } .myAlert button { background-color: #008cff; color: #fff; padding: 10px; border: none; border-radius: 5px; margin-top: 10px; }
在實際開發中,我們可以根據實際需求來更改 alert() 彈窗的樣式與內容,從而提高用戶體驗。