功能：點(diǎn)擊linkbutton,在網(wǎng)頁(yè)中央彈出一個(gè)radio單選框，同時(shí)背景變成灰色，選擇這個(gè)單選框的選項(xiàng)，實(shí)現(xiàn)換膚功能。
這主要是ModalPopupExtender控件提供的功能，控件設(shè)置如下:
<
ajaxToolkit:ModalPopupExtender
ID
="ModalPopupExtender1"
runat
="server"
TargetControlID
="LinkButton1"
PopupControlID
="Panel1"
BackgroundCssClass
="modalBackground"
DropShadow
="true"
OkControlID
="OkButton"
CancelControlID
="CancelButton"
OnOkScript
="onOk()"
>
</
ajaxToolkit:ModalPopupExtender
>
TargetControlID:關(guān)聯(lián)觸發(fā)按鈕； PopupControlID：彈出的單選框，一般使用panel; BackgroundCssClass:彈出單選框后的背景色； DropShadow：彈出單選框后是否需要陰影； OkControlID：關(guān)聯(lián)確定按鈕； CancelControlID；關(guān)聯(lián)取消按鈕； OnOkScript：關(guān)聯(lián)選擇后應(yīng)該執(zhí)行的腳本。
其中onOk(),是響應(yīng)Javascript的代碼，使用一個(gè)變量來(lái)替代css樣式。
以下是整個(gè)前臺(tái)代碼：
<%
@PageLanguage
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
changeCSS.aspx.cs
"
Inherits
=
"
changeCSS
"
%>
<!
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
runat
="server"
>
<
title
>
無(wú)標(biāo)題頁(yè)
</
title
>
<
link
href
="StyleSheet.css"
rel
="stylesheet"
type
="text/css"
/>
<
script
type
="text/javascript"
>
var
styleToSelect;
function
onOk()
{
document.getElementById(
'
Paragraph1
'
).className
=
styleToSelect;
}
</
script
>
</
head
>
<
body
>
<
form
id
="form1"
runat
="server"
>
<
div
>
<
asp:ScriptManager
ID
="ScriptManager1"
runat
="server"
>
</
asp:ScriptManager
>
</
div
>
<
asp:LinkButton
ID
="LinkButton1"
runat
="server"
Width
="240px"
>
Pleasechangethestyle
</
asp:LinkButton
>
<
p
id
=Paragraph1
>
<
a
href
="http://blog.csdn.net/burningcpu"
><
span
style
="color:#3366cc"
>
burningcpu
</
span
></
a
>
,
IamZhouLu,amemeberofShangHaiIscom.netteam,lovesoftwaredevelopment,enjoyit.
</
p
>
<
asp:Panel
ID
="Panel1"
runat
="server"
CssClass
="modalPopup"
Style
="display:none"
Width
="233px"
>
<
p
>
Choosethestyleyouwouldlike
</
p
>
<
input
id
="RadioA"
name
="Radio"
onclick
="styleToSelect='sampleStyleA';"
type
="radio"
/>
<
label
class
="sampleStyleA"
for
="RadioA"
>
ChooseTHISStyle.
</
label
><
br
/>
<
input
id
="RadioB"
name
="Radio"
onclick
="styleToSelect='sampleStyleB';"
type
="radio"
/>
<
label
class
="sampleStyleB"
for
="RadioB"
>
ChooseTHISStyle.
</
label
><
br
/>
<
input
id
="RadioC"
name
="Radio"
onclick
="styleToSelect='sampleStyleC';"
type
="radio"
/>
<
label
class
="sampleStyleC"
for
="RadioC"
>
ChooseTHISStyle.
</
label
><
br
/>
<
input
id
="RadioD"
name
="Radio"
onclick
="styleToSelect='sampleStyleD';"
type
="radio"
/>
<
label
class
="sampleStyleD"
for
="RadioD"
>
ChooseTHISStyle.
</
label
><
br
/>
<
div
align
="center"
>
<
asp:Button
ID
="OkButton"
runat
="server"
Text
="OK"
/>
<
asp:Button
ID
="CancelButton"
runat
="server"
Text
="Cancel"
/>
</
div
>
</
asp:Panel
>
<
ajaxToolkit:ModalPopupExtender
ID
="ModalPopupExtender1"
runat
="server"
TargetControlID
="LinkButton1"
PopupControlID
="Panel1"
BackgroundCssClass
="modalBackground"
DropShadow
="true"
OkControlID
="OkButton"
CancelControlID
="CancelButton"
OnOkScript
="onOk()"
>
</
ajaxToolkit:ModalPopupExtender
>
</
form
>
</
body
>
</
html
>
實(shí)現(xiàn)效果：
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
