Asp.net pop-up layer with Mask Layer

Implementation Method 1:

<! -- Display with JS control --> <SCRIPT type = "text/JavaScript" Language = "JavaScript"> function showno () // hide two layers {document. getelementbyid ("doing "). style. display = "NONE"; document. getelementbyid ("divlogin "). style. display = "NONE";} function $ (ID) {return (document. getelementbyid )? Document. getelementbyid (ID): Document. all [ID];} function showfloat () // display two layers based on the screen size {var range = getrange (); $ ('doing '). style. width = range. width + "PX"; $ ('doing '). style. height = range. height + "PX"; $ ('doing '). style. display = "Block"; document. getelementbyid ("divlogin "). style. display = "";} function getrange () // obtain the screen size {var Top = document. body. scrolltop; var left = document. body. scrollleft; var Height = document. body. clientheight; var width = document. body. clientwidth;

If (Top = 0 & left = 0 & Height = 0 & width = 0)
{
Top = document.doc umentelement. scrolltop;
Left = document.doc umentelement. scrollleft;
Height = document.doc umentelement. clientheight;
Width = document.doc umentelement. clientwidth;
}
Return {top: Top, left: Left, height: height, width: width };
}
</SCRIPT>
<Style type = "text/CSS">
Body {margin: 0px ;}
</Style>

<Form ID = "form1" runat = "server">
<A href = "javascript: void (0)" onclick = "showfloat ()"> login </a> // login Link
<! -- Add a translucent layer -->
<Div id = "doing" style = "filter: alpha (opacity = 30);-moz-opacity: 0.3; opacity: 0.3; Background-color: #000; width: 100%; Height: 100%; Z-index: 1000; position: absolute; left: 0; top: 0; display: none; overflow: hidden; ">
</Div>
<! -- Add a logon layer -->
<Div id = "divlogin" style = "border: solid 10px #898989; Background: # FFF; padding: 10px; width: 780px; Z-index: 1001; position: absolute; display: none; top: 50%; left: 50%; margin:-200px 0 0-400px; ">
<Div style = "padding: 3px 15px 3px 15px; text-align: Left; Vertical-align: middle;">
<Div>
User:
<Asp: textbox id = "txtusername" runat = "server"> </ASP: textbox>
</Div>
<Div>
Password:
<Asp: textbox id = "txtuserpwd" runat = "server" textmode = "password"> </ASP: textbox>
</Div>
<Br/>
<Div> & nbsp;
<Asp: button id = "bttlogin" runat = "server" text = "login"/> & nbsp;
<Input id = "bttcancel" type = "button" value = "Remove" onclick = "showno ()"/>
</Div>
</Div>
</Div>
</Form>

Method 2:

Use modalpopupextender of ajaxtoolkit to implement:

1. Control Function Description

The customer or server control is displayed in the mode window to highlight it! The pop-up is generally Div or panel.

2. Control property description

Targetcontrolid: ID of the control that triggers the pop-up operation.

Popupdraghandlecontrolid: The Control ID of the layer that can be dragged in the pop-up layer. It is the "title bar" layer ID.

Popupcontrolid: ID of the layer to be popped up.

Backgroundcssclass: The background style of the pop-up layer.

Dropshadow: Whether to display a shadow on the edge of the pop-up layer.

Okcontrolid: Click the OK button ID in the pop-up layer.

Onokscript: Click OK.

Cancelcontrolid: Deselect the Control ID of the pop-up layer in the pop-up layer.

Oncancelscript: Click the cancel button.

X,Y : Specifies the position of the pop-up layer.

Repositionmode: Indicates whether to move the position of the pop-up layer when the page window is adjusted or rolled.

 

 

3. Function demonstration

Page 3.1Code

< Style Type = "Text/CSS" >
. Modalbackground {
Background-color : Gray ;
Filter : Alpha (opacity = 50) ;
Opacity : 0.5 ;
} ;
. Modalpopup
{
Background-color : White ;
Opacity : 0 ;
}
Style >

...

< Div >
< ASP: button Runat = "Server" ID = "Btnviewmore" Text = "More" />
< ASP: Panel ID = "Pnlviewcustomer" Runat = "Server" Cssclass = "Modalpopup" Style = "Display: none ;" >  
< Div Style = "Margin: 10px" >
< H1 > The service is not available in < Span ID = "Country" > Span > . H1 >
< ASP: button Runat = "Server" ID = "Viewbox_ OK" Text = "OK" />
Div >
ASP: Panel >  
< Ajaxtoolkit: modalpopupextender ID = "Modalpopupextender2" Runat = "Server"  
Targetcontrolid = "Btnviewmore" Drag = "True"
Popupdraghandlecontrolid = "Pnlviewcustomer"  
Popupcontrolid = "Pnlviewcustomer"
Backgroundcssclass = "Modalbackground"
Dropshadow = "False"
Okcontrolid = "Viewbox_ OK" >
Ajaxtoolkit: modalpopupextender>
Div>

4. problems encountered during the test and their causes

4.1 After the pop-up layer, there are no controls other than the screen layer.

Cause: No backgroundcssclass is set. This CSS should be written by yourself. For example, modalbackground In the example.

4.2 After the backgroundcssclass is set, the pop-up layer is also displayed in gray.

Cause: cssclass of pnlviewcustomer in the pop-up layer is not set. This CSS should also be written by yourself. For example, modalpopup In the example.

5. Summary

5.1 to achieve the mode pop-up effect, you need to set the modalpopupextender's backgroundcssclass style and add the filter effect to this style!

 

Http://blog.csdn.net/gaoliuchang/archive/2008/08/02/2756630.aspx

This article is from the csdn blog. For more information, see the source: