【Vegas原创】使用ModalPopupExtender实现弹出式窗口

最新推荐文章于 2019-08-08 12:00:29 发布

weixin_33727510

最新推荐文章于 2019-08-08 12:00:29 发布

阅读量132

点赞数

本文介绍如何在ASP.NET中使用ModalPopupExtender组件创建弹窗，并详细解释了各属性的作用，包括设置触发按钮、弹出面板样式及拖动区域等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，添加script manager
2，添加ModalPopupExtender
3，转到代码页，设置以下属性：

<cc1:ModalPopupExtender ID="ModalPopupExtender"
            TargetControlID="LinkButton3"
            PopupControlID="Panel1"
            BackgroundCssClass="modalBackground"
            OkControlID="OkButton"
            CancelControlID="CancelButton"
             OnOkScript="onclick();"
            DropShadow="true"
            PopupDragHandleControlID="Panel3"  runat='server'/>

targetcontrolID 是你点击的控件
PopupControlID 是弹出的窗口控件
BackgroundCssClass 是你的背景样式表
...
PopupDragHandleControlID 是你拖动Panel的区域控件

    <asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
            <asp:Panel ID="Panel3" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">
                <div>
                    <p>添加标签页</p></div>
             </asp:Panel>
                <div><br />
                <p >标签页名称：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></p><br />
                   <p style="text-align: center;">
                        <asp:Button ID="OkButton" runat="server" Text="OK" />
                        <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
                    </p>
                </div>
            </asp:Panel>

css文件：

/*Modal Popup*/
.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}

.modalPopup {
    background-color:#ffffdd;
    border-width:3px;
    border-style:solid;
    border-color:Gray;
    padding:3px;
    width:250px;
}

.sampleStyleA {
    background-color:#FFF;
}

.sampleStyleB {
    background-color:#FFF;
    font-family:monospace;
    font-size:10pt;
    font-weight:bold;
}

.sampleStyleC {
    background-color:#ddffdd;
    font-family:sans-serif;
    font-size:10pt;
    font-style:italic;
}

.sampleStyleD {
    background-color:Blue;
    color:White;
    font-family:Arial;
    font-size:10pt;
}

css引用：