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)  

ModalPopupExtender使用技巧( operate ModalPopupExtender by JavaScript)

ModalPopupExtender是个非常好用的AJAX控件, 网上有很多教程,但大多没有提起它的一些使用技巧:   1.简单应用:   常用属性:       Tar...
  • my98800
  • my98800
  • 2017-01-04 08:54:04
  • 330

AJAX弹出窗口 ModalPopupExtender例子

  • 2010年11月11日 09:22
  • 1.65MB
  • 下载

AjaxControlToolkit.HTMLEditor

HtmlEditor在AjaxControlToolkit的上个版本中就已经提供了,属于一个功能比较简单的Html在线编辑器,虽说功能不多,不过对只需要基础的应用差不多已经足够了。       ...
  • wyh0318
  • wyh0318
  • 2012-07-31 12:51:34
  • 732

AjaxControlToolkit使用整理

  • 2011年10月22日 23:50
  • 168KB
  • 下载

vs2008安装AjaxControlToolkit

vs2008安装 AjaxControlToolkit-Framework3.5vs2008本身添加了ajax核心组件,不用像vs2005要自己添加,所以要添加AjaxControlToolkit到工...
  • jjjjj102310253
  • jjjjj102310253
  • 2008-03-06 11:31:00
  • 4721

AJAX扩展控件ModalPopupExtender(弹出模式对话框)的使用方法总结

如图所示弹出Web的模式窗体:页面代码: 无标题页 .bgcss {
  • zjj780320380
  • zjj780320380
  • 2010-05-12 01:41:00
  • 4508

AjaxControltoolkit学习笔记—AutoComplete使用详解

AutoComplete 是一个可以附属到任何一个 TextBox 控件上的 ASP.NET AJAX 扩展控件,它可以帮助页面用户的文本框输入, 显示提示信息,该信息可以根据用户的输入进行设置。 提...
  • madachi
  • madachi
  • 2009-03-09 11:09:00
  • 2299

ModalPopupExtender UpdatePanel 完整无刷新 传值

ModalPopupExtender UpdatePanel 完整无刷新 传值
  • xxhcust
  • xxhcust
  • 2010-06-29 22:35:00
  • 1418

ASP.NET Ajax Toolkit使用ModalPopupExtender控件

第一步:建立AJAX Control Toolkit Web Site要使用ModalPopupExtender我们要使用AJAX Control Toolkit Web Site模板。本例子是演示怎...
  • piaoyi_online
  • piaoyi_online
  • 2007-08-05 09:13:00
  • 4992

Atlas(AJAX)控件:Rating等级评分入门实例

先介绍Rating的基本属性: AutoPostBack - True to cause a postback on rating item click. CurrentRating -...
  • sutao_713
  • sutao_713
  • 2007-10-11 09:27:00
  • 1422
收藏助手
不良信息举报
您举报文章:AJAXControlToolKit之ModalPopupExtender控件实战篇
举报原因:
原因补充:

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