AJAXControlToolKit之ModalPopupExtender控件实战篇

最新推荐文章于 2020-12-22 14:38:12 发布

置顶 sutao_713

最新推荐文章于 2020-12-22 14:38:12 发布

阅读量3.2k

点赞数

分类专栏： atlas编程文章标签： asp.net server ajax class asp microsoft

本文链接：https://blog.csdn.net/sutao_713/article/details/1820186

版权

atlas编程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

说明：新建一个ASP.NET AJAX--Enabled Web Site(也可以自已配置Web.config), COPY以下代码即可看到效果。

以下是实例代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="modalPopup.aspx.cs" Inherits="modalPopup" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>modalPopup入门</title>
    <style type="text/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;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <script type="text/javascript">
        var styleToSelect;
        function onOk() {
            $get('Paragraph1').className = styleToSelect;
        }
    </script>
    <div class="demoarea">
        <div class="demoheading">ModalPopup Demonstration</div>

        <p id="Paragraph1">"ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. " +
            "This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. " +
            "In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. " +
            "And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. " +
            "However, AJAX isn't just for ASP.NET. " +
            "You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers. ";
            </p>
        <br />
        <asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to change the paragraph style" />

        <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>Choose the paragraph style you would like:</p>
                </div>
            </asp:Panel>
                <div>
                    <p>
                        <input type="radio" name="Radio" id="RadioA" checked="checked"
                            οnclick="styleToSelect = 'sampleStyleA';" />
                        <label for="RadioA" class="sampleStyleA"
                            style="padding: 3px;">Sample paragraph text</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioB"
                            οnclick="styleToSelect = 'sampleStyleB';" />
                        <label for="RadioB" class="sampleStyleB"
                            style="padding: 3px;">Sample paragraph text</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioC"
                            οnclick="styleToSelect = 'sampleStyleC';" />
                        <label for="RadioC" class="sampleStyleC"
                            style="padding: 3px;">Sample paragraph text</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioD"
                            οnclick="styleToSelect = 'sampleStyleD';" />
                        <label for="RadioD" class="sampleStyleD"
                            style="padding: 3px;">Sample paragraph text</label>
                    </p>
                    <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>


        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
            TargetControlID="LinkButton1"
            PopupControlID="Panel1"
            BackgroundCssClass="modalBackground"
            OkControlID="OkButton"
            OnOkScript="onOk()"
            CancelControlID="CancelButton"
            DropShadow="true"
            PopupDragHandleControlID="Panel3" />
    </div>

    </form>
</body>
</html>
介绍一下ModalPopup的基本属性:
TargetControlID - The ID of the element that activates the modal popup
PopupControlID - The ID of the element to display as a modal popup
BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed
DropShadow - True to automatically add a drop-shadow to the modal popup
OkControlID - The ID of the element that dismisses the modal popup
OnOkScript - Script to run when the modal popup is dismissed with the OkControlID
OkCancelID - The ID of the element that cancels the modal popup
OkCancelScript - Script to run when the modal popup is dismissed with the CancelControlID
PopupDragHandleControlID - The ID of the embedded element that contains the popup header/title which will be used as a drag handle
X - The X coordinate of the top/left corner of the modal popup (the popup will be centered horizontally if not specified)
Y - The Y coordinate of the top/left corner of the modal popup (the popup will be centered vertically if not specified)

sutao_713

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
AJAXControlToolKit之ModalPopupExtender控件实战篇

说明：新建一个ASP.NET AJAX--Enabled Web Site(也可以自已配置Web.config), COPY以下代码即可看到效果。以下是实例代码:http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" > modalPopup入门
复制链接

扫一扫

专栏目录