AJAXControlToolKit之ModalPopupExtender控件实战篇

原创 2007年10月11日 14:58:00

说明:新建一个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"
                            onclick="styleToSelect = 'sampleStyleA';" />
                        <label for="RadioA" class="sampleStyleA"
                            style="padding: 3px;">Sample paragraph text</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioB"
                            onclick="styleToSelect = 'sampleStyleB';" />
                        <label for="RadioB" class="sampleStyleB"
                            style="padding: 3px;">Sample paragraph text</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioC"
                            onclick="styleToSelect = 'sampleStyleC';" />
                        <label for="RadioC" class="sampleStyleC"
                            style="padding: 3px;">Sample paragraph text</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioD"
                            onclick="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)  

AjaxControlToolkit的安装与使用详解

转自:http://www.cnblogs.com/zm235/archive/2008/05/09/1189558.html AjaxControlToolkit下载 http://ajax...
  • qq285679784
  • qq285679784
  • 2017年04月18日 08:46
  • 544

快速浏览AjaxControlToolKit控件(一)

一.AlwaysVisibleControlExtender   重要的几个属性: 1.TargetControlID:需要悬浮的控件ID。 2.VerticalSide:垂直方向悬浮方式:to...
  • wendy_soft
  • wendy_soft
  • 2014年03月28日 14:07
  • 317

快速浏览AjaxControlToolKit控件(二)

五.DragPanelExtender 主要属性: 1.TargetControlID:被拖动的对象ID 2.DragHandleID:能够执行拖动操作的对象ID 当然DragHandleID...
  • wendy_soft
  • wendy_soft
  • 2014年03月28日 14:07
  • 305

快速浏览AjaxControlToolKit控件(四)

十三.UpdatePanelAnimationExtender 主要属性: 1.TargetControlID:被更新的UpdatePanel的ID 2.OnUpdating:开始更新的时候元素...
  • wendy_soft
  • wendy_soft
  • 2014年03月28日 14:07
  • 277

快速浏览AjaxControlToolKit控件(三)

九.ResizableControlExtender 主要属性: 1.TargetControlID:需要自动缩放的元素的ID 2.HandleCssClass:控制自动缩放元素的手柄样式 3...
  • wendy_soft
  • wendy_soft
  • 2014年03月28日 14:07
  • 331

Storm流计算项目视频教程

Storm流计算项目视频教程 Storm在大数据领域的影响已经不用多说,大数据实时性计算已经是发展趋势。目前在各大互联网、电商、电信、金融业等领域,Storm已经功不可没,被广泛应用...
  • xkqueen2
  • xkqueen2
  • 2014年09月12日 11:14
  • 590

【备忘】Java菜鸟到大牛学习路线之实战篇

Java菜鸟到大牛学习路线之实战篇!!!这是一套Java菜鸟到大牛的学习路线之实战教程,由工作了10年的资深Java架构师整理...
  • qq_38472089
  • qq_38472089
  • 2017年11月28日 17:45
  • 55

【caffe源码研究】第二章:实战篇(2) : ImageNet分类

本实战运行Classifying Imagenet的接口。1. 下载model新建一个download_model.bat,在caffe-master的工作目录下,内容./scripts/downlo...
  • fangjin_kl
  • fangjin_kl
  • 2016年12月26日 22:03
  • 766

黑客攻防技术宝典 Web实战篇1-8章总结

第一章 web应用程序安全与风险 1.基本的web功能,购物,社交,银行,邮件,博客,搜索,博彩等。 2.web应用程序是不安全的。 3.安全的核心问题是用户可以任意提交数据。 4.web应用...
  • zhenxin0
  • zhenxin0
  • 2017年03月29日 21:34
  • 256

《黑客攻防技术宝典Web实战篇@第2版》读书笔记1:了解Web应用程序

我们不是Hacker,我们只是Hack技术的爱好者。 读书笔记第一部分对应原书的第一章,主要介绍了Web应用程序的发展,功能,安全状况。...
  • xiediy
  • xiediy
  • 2017年12月27日 17:46
  • 65
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAXControlToolKit之ModalPopupExtender控件实战篇
举报原因:
原因补充:

(最多只允许输入30个字)