您的位置:首页 > 运维架构

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

2014-05-22 15:44 351 查看
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" />
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: