更改下拉列表中的选定值时如何显示弹出窗口？

Question

I want to display a popup window when I select a specific value from drop-down list. But I don't have any idea to do it as I want. I little example would be enough for this. For the pop up I expect to use panel.

Answer 1

It's pretty simple.Use SelectedIndexChanged event of dropdownlist

.aspx

<asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" Enabled="false" PopupControlID="PanelMonthly" TargetControlID="ddlfeegroup">

.cs

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    ModalPopupExtender2.Enabled = true;
    ModalPopupExtender2.Show();//popup show
}

on close button event again make ModalPopupExtender2.Enabled = false; or onclienclick of close button disable it

You can find more information here

Answer 2

Hope this will work

<asp:HiddenField ID="hidForModel" runat="server" />
    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged1"></asp:DropDownList>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <!-- ModalPopupExtender -->
    <cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="hidForModel"
        CancelControlID="btnClose" BackgroundCssClass="modalBackground">
    </cc1:ModalPopupExtender>
    <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
        <asp:Button ID="btnClose" runat="server" Text="Close" />
    </asp:Panel>
    <!-- ModalPopupExtender -->

.cs code

protected void DropDownList1_SelectedIndexChanged1(object sender, EventArgs e)
        {
            mp1.Show();
        }

css

    <style type="text/css">
    .modalBackground {
        background-color: Black;
        filter: alpha(opacity=90);
        opacity: 0.8;
    }

    .modalPopup {
        background-color: #FFFFFF;
        border-width: 3px;
        border-style: solid;
        border-color: black;
        padding-top: 10px;
        padding-left: 10px;
        width: 300px;
        height: 140px;
    }
</style>