使用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"   />