由于系統默認alert彈出窗口不能自定義樣式，有可能不符合網站的風格，雖然網上應該有很多這樣的JS

但是還是自己寫的比較放心，順便練習一下對DOM的操作

支持IE6下的SELECT不能遮罩的問題，谷歌支持圓角，IE6下就比較丑了，四四方方的，不過可以自定義自己喜歡的樣式

聽取建議后，修改了position:fixed, IE6下用hack處理了。

點擊看效果:

所需CSS：

使用方法，直接調用函數，傳遞所需定義的信息，支持定義是否有取消鍵：

alertMsg(msg, mode)

//mode為空，即只有一個確認按鈕，mode為1時有確認和取消兩個按鈕

函數代碼：添加了一個獲取窗口尺寸的函數，又長長了很多，可以把獲取窗口的尺寸另外立一個函數放公共庫里面，這里只是為了方便演示，寫到一個函數里面

function alertMsg(msg, mode) { //mode為空，即只有一個確認按鈕，mode為1時有確認和取消兩個按鈕

msg = msg || '';

mode = mode || 0;

var top = document.body.scrollTop || document.documentElement.scrollTop;

var isIe = (document.all) ? true : false;

var isIE6 = isIe && !window.XMLHttpRequest;

var sTop = document.documentElement.scrollTop || document.body.scrollTop;

var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

var winSize = function(){

var xScroll, yScroll, windowWidth, windowHeight, pageWidth, pageHeight;

// innerHeight獲取的是可視窗口的高度，IE不支持此屬性

if (window.innerHeight && window.scrollMaxY) {

xScroll = document.body.scrollWidth;

yScroll = window.innerHeight + window.scrollMaxY;

} else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac

xScroll = document.body.scrollWidth;

yScroll = document.body.scrollHeight;

} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari

xScroll = document.body.offsetWidth;

yScroll = document.body.offsetHeight;

}

if (self.innerHeight) { // all except Explorer

windowWidth = self.innerWidth;

windowHeight = self.innerHeight;

} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode

windowWidth = document.documentElement.clientWidth;

windowHeight = document.documentElement.clientHeight;

} else if (document.body) { // other Explorers

windowWidth = document.body.clientWidth;

windowHeight = document.body.clientHeight;

}

// for small pages with total height less then height of the viewport

if (yScroll < windowHeight) {

pageHeight = windowHeight;

} else {

pageHeight = yScroll;

}

// for small pages with total width less then width of the viewport

if (xScroll < windowWidth) {

pageWidth = windowWidth;

} else {

pageWidth = xScroll;

}

return{

'pageWidth':pageWidth,

'pageHeight':pageHeight,

'windowWidth':windowWidth,

'windowHeight':windowHeight

}

}();

//alert(winSize.pageWidth);

//遮罩層

var styleStr = 'top:0;left:0;position:absolute;z-index:10000;background:#666;width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;';

styleStr += (isIe) ? "filter:alpha(opacity=80);" : "opacity:0.8;"; //遮罩層DIV

var shadowDiv = document.createElement('div'); //添加陰影DIV

shadowDiv.style.cssText = styleStr; //添加樣式

shadowDiv.id = "shadowDiv";

//如果是IE6則創建IFRAME遮罩SELECT

if (isIE6) {

var maskIframe = document.createElement('iframe');

maskIframe.style.cssText = 'width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;position:absolute;visibility:inherit;z-index:-1;filter:alpha(opacity=0);';

maskIframe.frameborder = 0;

maskIframe.src = "about:blank";

shadowDiv.appendChild(maskIframe);

}

document.body.insertBefore(shadowDiv, document.body.firstChild); //遮罩層加入文檔

//彈出框

var styleStr1 = 'display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 200) + 'px;top:' + (winSize.windowHeight / 2 - 150) + 'px;_top:' + (winSize.windowHeight / 2 + top - 150)+ 'px;'; //彈出框的位置

var alertBox = document.createElement('div');

alertBox.id = 'alertMsg';

alertBox.style.cssText = styleStr1;

//創建彈出框里面的內容P標簽

var alertMsg_info = document.createElement('P');

alertMsg_info.id = 'alertMsg_info';

alertMsg_info.innerHTML = msg;

alertBox.appendChild(alertMsg_info);

//創建按鈕

var btn1 = document.createElement('a');

btn1.id = 'alertMsg_btn1';

btn1.href = 'javas' + 'cript:void(0)';

btn1.innerHTML = '確定';

btn1.onclick = function () {

document.body.removeChild(alertBox);

document.body.removeChild(shadowDiv);

return true;

};

alertBox.appendChild(btn1);

if (mode === 1) {

var btn2 = document.createElement('a');

btn2.id = 'alertMsg_btn2';

btn2.href = 'javas' + 'cript:void(0)';

btn2.innerHTML = '取消';

btn2.onclick = function () {

document.body.removeChild(alertBox);

document.body.removeChild(shadowDiv);

return false;

};

alertBox.appendChild(btn2);

}

document.body.appendChild(alertBox);

}

總結

以上是生活随笔為你收集整理的php自定义弹窗,自定义弹窗Style样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。