1024programmer Java 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

I searched the code online and made some modifications.
Fixed the inability to customize colors, corrected 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
// Text of prompt content Alignment
The 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.
The prompt content can be made with HTML The marked text can also be a page link

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 prompt content

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(“p”);
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;”;

var msgObj=document.createElement(“p”) ;
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;”;

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 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(){
var msgBox = table.insertRow(-1).insertCell(-1);
msgBox .style.cssText = “font:10pt ‘宋体’;”;
msgBox.colSpan = 2;

if(framesrc != “”)
msg = “”;
msgBox.innerHTML = “



if(document.getElementById(“frmAlertWin”) != null)
document.getElementById(“frmAlertWin”).src = framesrc;

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

Call Method
var msgbox=new MessageBox();
msgbox.Show(‘Site Announcement’,”Tips”,””,500,220);///Parameters: title, content (when the prompt is to connect to the page Can be empty), connection page address (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 it will not return in IE8 An error occurred

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/722292

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us


Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top