Ajax controltoolkit Learning Log-modalpopupextender (16)

The modalpopupextender control is used to set the text style on the webpage.

The following is an example:

1) Create an ASP. NET Ajax-enabeld web project in vs2005 and name it modalpopupextender1.

2) Add a text section to the <DIV/> label of default. aspx. Add a linkbutton control to trigger the control style panel generation.

3) Add a panel on the page named Panel1 as the pop-up panel. Add a panel in Panel1 named panel2 as the control to control the drag. Finally, four radio controls are added to Panel1 to provide different styles.

CodeAs follows:

1 < ASP: Panel ID = "Panel1" Runat = "Server" Bordercolor = "Deepskyblue" Borderwidth = "1px"
2 Height = "278px" Horizontalalign = "Center" Width = "420px" Style = "Display: none ;" Cssclass = "Modalpopup" >
3 < ASP: Panel ID = "Panel2" Runat = "Server" Bordercolor = "Orange" Borderwidth = "1px" Height = "25px"
4 Horizontalalign = "Center" Style = "Margin: Top 4px; cursor: move ;" Width = "409px"   >
5 Choose the paragraph style you wowould like: </ ASP: Panel >
6 < BR />
7 < Div Style = "Width: 420px; text-align: left" >
8 < P Class = "Samplesytlea" > < Input ID = "Radio1" Name = "Styleselect" Checked = "Checked" Type = "Radio" Onclick = "Styletoselect = 'samplestylea '"   /> Sample paragraph text </ P >
9 < P Class = "Samplestyleb" > < Input ID = "Radio2" Name = "Styleselect" Type = "Radio" Onclick = "Styletoselect = 'samplestyleb '"   /> Sample paragraph text </ P >
10 < P Class = "Samplestylec" > < Input ID = "Radio3" Name = "Styleselect" Type = "Radio" Onclick = "Styletoselect = 'samplestylec '"   /> Sample paragraph text </ P >
11 < P Class = "Samplestyled" > < Input ID = "Radio4" Name = "Styleselect" Type = "Radio" Onclick = "Styletoselect = 'samples '"   /> Sample paragraph text </ P >
12 </ Div >
13 < Div Style = "Text-align: Center" >
14 < ASP: button ID = "Okbutton" Runat = "Server" Text = "OK"   />
15 < ASP: button ID = "Cancelbutton" Runat = "Server" Text = "Cancel"   />
16 </ Div >
17 </ ASP: Panel >

4) Add a modalpopupextender on the page and set some attributes.

The Code is as follows: 1 < C0: modalpopupextender ID = "Modalpopupextender1" Targetcontrolid = "Linkbutton1"
2 Okcontrolid = "Okbutton" Onokscript = "Onok ()" Cancelcontrolid = "Cancelbutton" Popupdraghandlecontrolid = "Panel2" Dropshadow = "True" Popupcontrolid = "Panel1" Backgroundcssclass = "Modalbackground" Runat = "Server" > </ C0: modalpopupextender >
3

Attribute description:

Targetcontrolid: controls used to trigger the pop-up panel.
Okcontrolid: the confirmation button in the pop-up panel to confirm the new style.
Onokscript: When you click OK, close the style panel and run the script.
Cancelcontrolid: The cancel button in the style panel to cancel the apply style.
Popupdraghandlecontrolid: the control used to trigger the panel in the style panel.
Dropshadow: whether the style panel has shadow. If the value is true, there is a shadow. If the value is false, There is no shadow.
Backgroundcssclass: the CSS style applied in the style panel.

5) Add a script on the page to process the style selection in the pop-up panel.

The Code is as follows:

1 VaR Styletoselect;
2 Function Onok ()
3 {
4$ Get ("Text"). Classname=Styletoselect;
5}

6) press Ctrl + F5 to view the effect in the browser.

As follows: