カスタム ポップアップ スタイル style_html/css_WEB-ITnose

システムのデフォルトのアラートポップアップウィンドウはスタイルをカスタマイズできないため、Web サイトのスタイルに準拠しない可能性があります。このような JS はインターネット上にたくさんあるはずですが

、ちなみに、自分で書いて DOM の操作を練習する方が安全です

IE6 では SELECT がマスクできない問題をサポートします。IE6 では角が丸く見えにくくなりますが、好みのスタイルにカスタマイズできます。

提案を聞いた後、位置を修正しました: 修正済み、IE6 ハックで修正します。

クリックして効果を確認します:

クリックしてアラートポップアップボックスをシミュレートします

クリックしてアラートポップアップボックスをシミュレートします

クリックしてアラートポップアップボックスをシミュレートします

必須の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时有确认和取消两个按钮

クリックしてアラート ポップアップ ボックスをシミュレートします

クリックしてアラート ポップアップ ボックスをシミュレートします

クリックしてアラート ポップアップ ボックスをシミュレートします

関数コード: ウィンドウ サイズの取得を追加しました 関数はさらに長くなります。ウィンドウのサイズを取得してそれを配置する別の関数を設定できます。これは、デモの便宜のためだけに関数に記述します

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

クリックしてアラート ポップアップ ボックスをシミュレートします

クリックしてアラート ポップアップ ボックスをシミュレートします

クリックしてアラートポップアップボックスをシミュレートします