Home  >  Article  >  Web Front-end  >  自定义弹窗Style样式_html/css_WEB-ITnose

自定义弹窗Style样式_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:16:501266browse

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

但是还是自己写的比较放心,顺便练习一下对DOM的操作

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

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

点击看效果:

点击模拟Alert弹出框

点击模拟Alert弹出框

点击模拟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弹出框

点击模拟Alert弹出框

点击模拟Alert弹出框

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

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 = '<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);    }

 

点击模拟Alert弹出框

点击模拟Alert弹出框

点击模拟Alert弹出框

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn