使用ModalPopupExtender实现弹出式窗口

 

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引用：

  <link href="StyleSheet.css" rel="stylesheet" type="text/css" />