Home > Web Front-end > JS Tutorial > A DIV written in JavaScript pops up a web page dialog box_javascript skills

A DIV written in JavaScript pops up a web page dialog box_javascript skills

WBOY
Release: 2016-05-16 18:48:10
Original
1022 people have browsed it

I searched the code online and made some modifications.
Fixed the inability to customize colors, fixed errors under IE8, and other small bugs. Compatible with IE6~8 and Firefox
can be customized
//Prompt window title Height
// Border color of prompt window
// Title color of prompt window
// Title background color of prompt window
// Background color of prompt content
// Prompt content text Alignment
function can pop up a large DIV to cover the page (transparent under IE) and then display a small DIV in the center of the screen
can be used as function prompts, operation tips and announcements, etc.
Prompt content can be made with HTML The marked text can also be a page link

Copy code The code is as follows:

function MessageBox( )
{
this.titleheight = "21"; // Prompt window title height
this.bordercolor = "#666699"; // Prompt window border color
this.titlecolor = "# 1259a4"; // Title color of the prompt window
this.titlebgcolor = "#e4f1fb"; // Title background color of the prompt window
this.bgcolor = "#FFFFFF"; // Background color of the prompt content
this.MsgAlign="left";

this.Show=function(title, msg, framesrc, w, h)
{
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight document.documentElement.scrollTop*2;
var bgObj = document.createElement("div");
bgObj.style.cssText = "position:absolute;left:0px; top:0px;width:" iWidth "px;height:" Math.max(document.body.clientHeight, iHeight) "px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z -index:101;";
document.body.appendChild(bgObj);

var msgObj=document.createElement("div");
msgObj.style.cssText = "position:absolute ;font:11px '宋体';top:" (iHeight-h)/2 "px;left:" (iWidth-w)/2 "px;width:" w "px;height:" h "px;text- align:center;border:1px solid " this.bordercolor ";background-color:" this.bgcolor ";padding:1px;line-height:22px;z-index:102;";
document.body.appendChild (msgObj);

var table = document.createElement("table");
msgObj.appendChild(table);
table.style.cssText = "margin:0px;border:0px; padding:0px;";
table.cellSpacing = 0;
var tr = table.insertRow(-1);
var titleBar = tr.insertCell(-1);
titleBar.style. cssText = ";width:" (w-84) "px;height:" this.titleheight "px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:" this .titlecolor ";cursor:move;background-color:" this.titlebgcolor;
titleBar.style.paddingLeft = "10px";
titleBar.innerHTML = title;
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;

titleBar.onmousedown = function(){
var evt = getEvent();
moveable = true;
moveX = evt.clientX;
moveY = evt.clientY;
moveTop = parseInt(msgObj.style.top);
moveLeft = parseInt(msgObj.style.left);

document.onmousemove = function(){
if (moveable)
{
var evt = getEvent();
var x = moveLeft evt.clientX - moveX;
var y = moveTop evt.clientY - moveY;
if ( x > 0 &&( x w < ; iWidth) && y > 0 && (y h < iHeight) )
{
msgObj.style.left = x "px";
msgObj.style.top = y "px";
}
}
};

document.onmouseup = function (){
if (moveable)
{
document.onmousemove = docMouseMoveEvent;
document. onmouseup = docMouseUpEvent;
moveable = false;
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
};
}

var closeBtn = tr.insertCell(-1);
closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" this.titlebgcolor;
closeBtn .innerHTML = " ×Close window";
closeBtn.onclick = function(){
document.body.removeChild(bgObj);
document.body.removeChild(msgObj);
}
var msgBox = table.insertRow(-1).insertCell(-1);
msgBox.style.cssText = "font:10pt '宋体';";
msgBox.colSpan = 2;

if( framesrc != "")
{
msg = "";
}
msgBox.innerHTML = "
" msg "
";

if(document.getElementById("frmAlertWin") != null)
{
document.getElementById("frmAlertWin").src = framesrc;
}


function getEvent(){
return window.event || arguments .callee.caller.arguments[0];
}
}
}

Calling method
var msgbox=new MessageBox();
msgbox.Show('Site Announcement',"Tips","",500,220);///Parameters: Title, Content(Tip It can be empty when connecting to the page), the link page address (it can be empty when using text), width, height
It should be noted that if a prompt pops up when the page is loaded, please put the calling code after the body tag, otherwise An error occurs under IE8
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template