웹 프론트엔드 HTML 튜토리얼 自定义弹窗Style样式_html/css_WEB-ITnose

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

Jun 24, 2016 am 11:16 AM

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

& lt; datalist & gt의 목적은 무엇입니까? 요소?

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

& lt; meter & gt의 목적은 무엇입니까? 요소?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까? iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까? Mar 18, 2025 pm 02:51 PM

iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까?

See all articles