<div>模擬alert</div>
在網頁開發中,alert是一種常用的用于顯示提示信息的彈窗。然而,alert默認樣式簡單,不能自定義,且它會阻塞頁面上的其他操作。為了解決這些問題,可以使用<div>來模擬alert。
下面是幾個使用<div>模擬alert的代碼案例:
案例一:
// 創建一個隱藏的div元素
let alertDiv = document.createElement('div');
alertDiv.classList.add('alert');
alertDiv.style.display = 'none';
document.body.appendChild(alertDiv);
<br>
// 定義一個模擬alert的函數
function myAlert(message) {
alertDiv.innerText = message;
alertDiv.style.display = 'block';
setTimeout(function() {
alertDiv.style.display = 'none';
}, 3000);
}
<br>
// 使用模擬alert
myAlert('這是一個提示信息!');
上述代碼中,創建了一個隱藏的div元素,并添加了一個alert類。在myAlert函數中,將提示信息寫入div元素中,然后將其顯示出來,并在3秒后隱藏。
案例二:
// 創建一個隱藏的div元素
let alertDiv = document.createElement('div');
alertDiv.classList.add('alert');
alertDiv.style.display = 'none';
document.body.appendChild(alertDiv);
<br>
// 定義一個模擬alert的函數
function myAlert(message, callback) {
alertDiv.innerText = message;
alertDiv.style.display = 'block';
setTimeout(function() {
alertDiv.style.display = 'none';
if (callback) {
callback();
}
}, 3000);
}
<br>
// 使用模擬alert
myAlert('這是一個提示信息!', function() {
console.log('提示信息已關閉!');
});
上述代碼與前一個案例相似,但在myAlert函數中多加了一個回調函數參數。當提示信息關閉后,如果傳入了回調函數,則執行回調函數。
通過以上幾個案例,我們可以看到,通過使用<div>來模擬alert,我們可以更好地控制提示信息的樣式、顯示時間以及執行其他操作。同時,可以根據實際需求來自定義自己的alert彈窗。
參考其他文章真實案例:
案例三:
// 創建一個隱藏的div元素
let alertDiv = document.createElement('div');
alertDiv.classList.add('alert');
alertDiv.style.display = 'none';
document.body.appendChild(alertDiv);
<br>
// 定義一個模擬alert的函數
function myAlert(message, options) {
alertDiv.innerText = message;
alertDiv.style.display = 'block';
if (options) {
if (options.backgroundColor) {
alertDiv.style.backgroundColor = options.backgroundColor;
}
if (options.textColor) {
alertDiv.style.color = options.textColor;
}
if (options.duration) {
setTimeout(function() {
alertDiv.style.display = 'none';
}, options.duration);
}
} else {
setTimeout(function() {
alertDiv.style.display = 'none';
}, 3000);
}
}
<br>
// 使用模擬alert
myAlert('這是一個提示信息!', {
backgroundColor: '#ff0000',
textColor: '#ffffff',
duration: 5000
});
上述代碼中,通過引入options參數,使使用者能夠自定義提示信息的背景色、文字顏色以及顯示時間。若未傳入options參數,則使用默認設置。
通過以上案例,我們可以看到,使用<div>模擬alert能夠靈活控制提示信息的樣式和行為,并滿足用戶個性化的需求。