Custom pop-up Style and pop-up style

Custom pop-up Style and pop-up style

Because the system's default alert pop-up window cannot customize the style, it may not match the style of the website, although there should be many such JS

However, you can rest assured that you can perform DOM operations by yourself.

The SELECT statement under IE6 cannot be masked. Google supports rounded corners. IE6 is ugly, but you can customize your favorite styles.

After listening to the suggestions, I modified position: fixed and used hack for processing in IE6.

Click to see the effect:

Click the simulate Alert pop-up box

Click the simulate Alert pop-up box

Click the simulate Alert pop-up box

Required 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>

You can call a function directly to transmit the required information. You can define whether a cancel key exists:

AlertMsg (msg, mode) // mode is empty, that is, there is only one confirmation button. When mode is 1, there are two buttons: Confirmation and cancellation.

 

Click the simulate Alert pop-up box

Click the simulate Alert pop-up box

Click the simulate Alert pop-up box

Function Code: added a function for obtaining the window size, which is much longer. You can set a function for obtaining the window size and put it in the public library for convenience demonstration, write to a function

Function alertMsg (msg, mode) {// mode is empty, that is, there is only one confirmation button. When mode is 1, both the confirmation button and the cancel button msg = msg | ''; mode = mode | 0; var top = document. body. scrollTop | document.doc umentElement. scrollTop; var isIe = (document. all )? True: false; var isIE6 = isIe &&! Window. XMLHttpRequest; var sTop = document.doc umentElement. scrollTop | document. body. scrollTop; var sLeft = document.doc umentElement. scrollLeft | document. body. scrollLeft; var winSize = function () {var xScroll, yScroll, 1_wwidth, windowHeight, pageWidth, pageHeight; // The innerHeight obtains the height of the visible window, IE does not support this attribute 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... wocould also work in Explorer 6 Strict, Mozilla and Safari xScroll = document. body. offsetWidth; yScroll = document. body. offsetHeight;} if (self. innerHeight) {// all Before t Explorer expires wwidth = self. innerWidth; required wheight = self. innerHeight;} else if (document.doc umentElement & document.doc umentElement. clientHeight) {// Explorer 6 Strict Mode required wwidth = document.doc umentElement. clientWidth; required wheight = document.doc umentElement. clientHeight;} else if (document. body) {// other schedulers required wwidth = document. body. clientWidth; required wheight = docu Ment. 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 <symbol wwidth) {pageWidth = symbol wwidth;} else {pageWidth = xScroll;} return {'pagewidth ': pageWidth, 'pageheight': pageHeight, 'win DowWidth ': Invalid wwidth, 'invalid wheight': Invalid wheight} (); // alert (winSize. pageWidth); // mask layer 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;"; // mask layer DIV var shadowDiv = document. createElement ('div '); // Add the shadowDiv.style.css Text = styleStr; // Add the style shadowDiv. id = "shadowDiv"; // if IE6 is used, create an IFRAME mask SELECT if (isIE6) {var maskIframe = document. createElement ('iframe'); maskIframe.style.css Text = '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); // Add the document to the mask layer // the pop-up box var styleStr1 = 'display: block; position: fixed; _ position: absolute; left: '+ (winSize. required wwidth/2-200) + 'px; top: '+ (winSize. optional wheight/2-150) + 'px; _ top: '+ (winSize. optional wheight/2 + top-150) + 'px; '; // The Position of the pop-up box var alertBox = document. createElement ('div '); alertBox. id = 'alertmsg'; alertBox.style.css Text = styleStr1; // create the content P tag var alertMsg_info = document in the pop-up box. createElement ('P'); alertMsg_info.id = 'alertmsg _ info'; alertMsg_info.innerHTML = msg; alertBox. appendChild (alertMsg_info); // create the button var btn1 = document. createElement ('A'); btn1.id = 'alertmsg _ btn1 '; btn1.href = 'javas' + 'region: void (0 )'; btn1.innerHTML = '<cite> OK </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' + 'region: void (0 )'; btn2.innerHTML = '<cite> cancel </cite>'; btn2.onclick = function () {document. body. removeChild (alertBox); document. body. removeChild (shadowDiv); return false ;}; alertBox. appendChild (btn2);} document. body. appendChild (alertBox );}

Click the simulate Alert pop-up box

Click the simulate Alert pop-up box

Click the simulate Alert pop-up box