The custom dialog box appears in JavaScript and the page is displayed.

(Www.bkjia.com) Tutorial HTML page pop-up custom dialog box and jump to the page in two ways (using JavaScript)

Method 1 system API method:
Call window. showModalDialog to open the dialog box with the custom page as the content. Based on the returned value, jump to the specified page through window. location. href. For how to use window. showModalDialog, see http://msdn.microsoft.com/en-us/library/ms536759 (VS.85). aspx

<! -- The page of the dialog box needs to pop up -->
<Script type = "text/javascript">
Function fnOpen ()
{
Var r = window. showModalDialog ("http://dlg.aspx", "", "dialogWidth: 200px; dialogHeight: 200px; resizable: no; scroll: no; status: no; edge: sunken; unadorned: yes; ");

Switch (r)
{
Case 1:
Window. location. href = "http://1.aspx"
Break;
Default:
Break;
}
}
</Script>
<! -- Img control, click to call fnOpen -->
<Div id = "1" align = "center" style = "cursor: pointer">
<Br>
</Div>
Create a new dlg. aspx, add the content to be displayed at will, and assign a return value when exiting.

<! -- Dlg. aspx add return value and close dialog box -->
<Input name = "Btn" type = "button" value = "1" styleonclick = "window. returnValue = 1; window. close ();"> </td>

Advantage: it is convenient, fast, and simple.
Disadvantage: Non-IE running may be abnormal. The border of the dialog box cannot be removed.
Extended: You can also use methods such as window. open and showmodelessDialog. The method is similar and the effects are different.

Method 2: mask
By using a mask, you can hide a div in advance and call up the display as needed.

<! -- The following code is learned and integrated from multiple sites on the Internet. Due to different sources and self-modification, please forgive me for not specifying it. -->
<Script type = "text/javascript">
Var docEle = function ()
{
Return document. getElementById (arguments [0]) | false;
}


Function openNewDiv (_ id)
{
Var m = "mask ";
If (docEle (_ id) document. body. removeChild (docEle (_ id ));
If (docEle (m) document. body. removeChild (docEle (m ));

// Mask Layer

Var newMask = document. createElement ("div ");
NewMask. id = m;
NewMask. style. position = "absolute ";
NewMask. style. zIndex = "1 ";
_ ScrollWidth = Math.max(document.body.scrollWidth,document.doc umentElement. scrollWidth );
_ ScrollHeight = Math.max(document.body.scrollHeight,document.doc umentElement. scrollHeight );
NewMask. style. width = _ scrollWidth + "px ";
NewMask. style. height = _ scrollHeight + "px ";
NewMask. style. top = "0px ";
NewMask. style. left = "0px ";
NewMask. style. background = "# 33393C ";
NewMask. style. filter = "alpha (opacity = 40 )";
NewMask. style. opacity = "0.40 ";
Document. body. appendChild (newMask );

// New pop-up layer

Var newDiv = document. createElement ("div ");
NewDiv. id = _ id;
NewDiv. style. position = "absolute ";
NewDiv. style. zIndex = "9999 ";
NewDivWidth = 250;
NewDivHeight = 200;
NewDiv. style. width = newDivWidth + "px ";
NewDiv. style. height = newDivHeight + "px ";
NewDiv. style. top = (document. body. scrollTop + document. body. clientHeight/2-newDivHeight/2) + "px ";
NewDiv. style. left = (document. body. scrollLeft + document. body. clientWidth/2-newDivWidth/2) + "px ";
NewDiv. style. background = "# EFEFEF ";
NewDiv. style. border = "1px solid #860001 ";
NewDiv. style. padding = "5px ";
NewDiv. innerHTML = document. getElementById ("HideDlg"). innerHTML;
NewDiv. innerHTML + = "& nbsp"
Document. body. appendChild (newDiv );

// Scroll center of the pop-up layer

Function newDivCenter ()
{
NewDiv. style. top = (document. body. scrollTop + document. body. clientHeight/2-newDivHeight/2) + "px ";
NewDiv. style. left = (document. body. scrollLeft + document. body. clientWidth/2-newDivWidth/2) + "px ";
}
If (document. all)
{
Window. attachEvent ("onscroll", newDivCenter );
}
Else
{
Window. addEventListener ('scroll ', newDivCenter, false );
}

// Close the new layer and the mask Layer

Var newA = document. createElement ("");
NewA. href = "#";
NewA. innerHTML = "Cancel ";
NewA. onclick = function ()
{
If (document. all)
{
Window. detachEvent ("onscroll", newDivCenter );
}
Else
{
Window. removeEventListener ('scroll ', newDivCenter, false );
}
Document. body. removeChild (docEle (_ id ));
Document. body. removeChild (docEle (m ));
Return false;
}
NewDiv. appendChild (newA );
}

Function closeDiv ()
{
If (document. all)
{
Window. detachEvent ("onscroll", newDivCenter );
}
Else
{
Window. removeEventListener ('scroll ', newDivCenter, false );
}
Document. body. removeChild (docEle (_ id ));
Document. body. removeChild (docEle (m ));
Return false;
}
</Script>
<! -- Img control, click to trigger -->
<Div id = "1" align = "center" style = "cursor: pointer">
<Br>

</Div>
<! -- Hide the div and modify it at will -->
<Div id = "HideDlg" style = "display: none;">
<Input name = "Btn" type = "button" value = "1" onclick = "window. location. href = 'HTTP: // www.bkjia.com /'
</Div>

Advantage: The display effect is good and there is no border. After the pop-up, it is always in the middle of the screen, and the home page is grayed out.
Disadvantage: the code is complex.
NOTE: If it is added to motherpage and the trigger control is <input img>, the page self-fl screen may be triggered, causing the page Jump to be overwritten.