原创JS模拟Alert弹出框效果--自定义CSS样式

huozheleisi

浏览: 1291031 次

最近访客更多访客>>

AVI

wangyy

u012363178

shh200438

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1798)

社区版块

存档分类

由于系统默认alert弹出窗口不能自定义样式，有可能不符合网站的风格，虽然网上应该有很多这样的JS

但是还是自己写的比较放心，自己是新手，所以顺便练习一下对DOM的操作

支持IE6下的SELECT不能遮罩的问题，谷歌支持圆角，IE6下就比较丑了，四四方方的，不过可以自定义自己喜欢的样式

听取建议后，修改了position:fixed, IE6下用hack处理了。

点击看效果:

点击模拟Alert弹出框

所需CSS：

    <style type="text/css">
        #alertMsg 
{
            display
: none
;
            width
: 400px
;
            border
: 1px solid #ddd
;
            border-radius
: 5px
;
            box-shadow
: 1px 1px 10px black
;
            padding
: 10px
;
            font-size
: 12px
;
            position
: absolute
;
            text-align
: center
;
            background
: #fff
;
            z-index
: 100000
;
        }

        #alertMsg_info 
{
            padding
: 2px 15px
;
            line-height
: 1.6em
;
            text-align
: left
;
        }

        #alertMsg_btn1, #alertMsg_btn2 
{
            display
: inline-block
;
            background
: url(images/gray_btn.png) no-repeat left top
;
            padding-left
: 3px
;
            color
: #000000
;
            font-size
: 12px
;
            text-decoration
: none
;
            margin-right
: 10px
;
            cursor
: pointer
;
        }

        #alertMsg_btn1 cite, #alertMsg_btn2 cite 
{
            line-height
: 24px
;
            display
: inline-block
;
            padding
: 0 13px 0 10px
;
            background
: url(images/gray_btn.png) no-repeat right top
;
            font-style
: normal
;
        }

    </style>

使用方法，直接调用函数，传递所需定义的信息，支持定义是否有取消键：

alertMsg(msg, mode)  
//mode为空，即只有一个确认按钮，mode为1时有确认和取消两个按钮

点击模拟Alert弹出框

函数代码：添加了一个获取窗口尺寸的函数，又长长了很多，可以把获取窗口的尺寸另外立一个函数放公共库里面，这里只是为了方便演示，写到一个函数里面

function
 alertMsg(msg, mode) { //
mode为空，即只有一个确认按钮，mode为1时有确认和取消两个按钮

        msg = msg || '';
        mode 
= mode || 0;
        
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;'; //
弹出框的位置

        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 
= '<cite>确定</cite>';
        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 
= '<cite>取消</cite>';
            btn2.onclick 
= function
 () {
                document.body.removeChild(alertBox);
                document.body.removeChild(shadowDiv);
                
return
 false
;
            };
            alertBox.appendChild(btn2);
        }
        document.body.appendChild(alertBox);

    }