自定义弹窗Style样式

Posted 流水乄心

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义弹窗Style样式相关的知识,希望对你有一定的参考价值。

由于系统默认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弹出框

以上是关于自定义弹窗Style样式的主要内容,如果未能解决你的问题,请参考以下文章

如何自定义Android Dialog的样式?

微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

Android自定义半透明背景弹窗非popwindow/dialog超简单任意编写!

Android自定义半透明背景弹窗非popwindow/dialog超简单任意编写!

微信小程序 自定义弹窗

Android 自定义View