altas(ajax)控件(十六):遮盖全屏幕的对话框控件ModalPopup

原创 2007年09月21日 21:24:00

altas(ajax)控件(十六):遮盖全屏幕的对话框控件ModalPopup

遮盖全屏幕的对话框扩展控件ModalPopup使用时,会出现整个屏幕都会是灰色的,只有一个“模式”对话框可以操作. ModalPopup是一个扩展控件,它建立在已经存在panel等容器控件的基础上,而panel上可以放置任何控件,panel的样式也是自定义的. 当控件使用时, 点击panel之外的操作都是无效的. ModalPopup扩展控件,可以在Panel中指定一个“OK”按钮和“Cancel”按钮,并且可以执行这两个按钮的客户端代码. 同时扩展控件有一个”X”“Y”可以指定panel出现时候的顶部和左边的位置.

 

 

属性

解释

TargetControlID

点击后出现对话框的控件,一般为按钮控件

PopupControlID

对话框中的Panelid

BackgroundCssClass

背景的css

DropShadow

对话框是否有阴影效果

OkControlID

Ok按钮的id

OnOkScript

Ok按钮触发脚本

CancelControlID

Cancel按钮的id

OkCancelScript

Cancel按钮触发脚本

PopupDragHandleControlID

Panel的中的标题栏,可以拖动,一般也是Panel

X

出现时,顶部的位置。

Y

出现时,左边的位置。

例子:

 

 

 

 

 

 

    <ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />

    <script type="text/javascript">

        var styleToSelect;

        function onOk() {

           //在这里写代码

        }

       

        // Add click handlers for buttons to show and hide modal popup on pageLoad

        function pageLoad() {

            $addHandler($get("showModalPopupClientButton"), 'click', showModalPopupViaClient);

            $addHandler($get("hideModalPopupViaClientButton"), 'click', hideModalPopupViaClient);       

        }

       

        function showModalPopupViaClient(ev) {

            ev.preventDefault();

            var modalPopupBehavior = $find('programmaticModalPopupBehavior');

            modalPopupBehavior.show();

        }

       

        function hideModalPopupViaClient(ev) {

            ev.preventDefault();       

            var modalPopupBehavior = $find('programmaticModalPopupBehavior');

            modalPopupBehavior.hide();

        }

    </script>

   

    <div class="demoarea">

        <div class="demoheading">ModalPopup Demonstration</div>

        <p id="Paragraph1"><%= GetContentFillerText() %></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 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"  />

        <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/>

        <ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup"

            BehaviorID="programmaticModalPopupBehavior"

            TargetControlID="hiddenTargetControlForModalPopup"

            PopupControlID="programmaticPopup"

            BackgroundCssClass="modalBackground"

            DropShadow="True"

            PopupDragHandleControlID="programmaticPopupDragHandle" >

        </ajaxToolkit:ModalPopupExtender>

 

 

http://asp.net/AJAX/Control-Toolkit/Live/ModalPopup/ModalPopup.aspx

 

AJAXControlToolKit的ModalPopup控件

  • 2009年06月28日 21:47
  • 447KB
  • 下载

基于Java语言的安卓编程之十六ListView控件1(上)

前一天学习了AutoCompleteTextView控件的使用方法。该控件主要的功能是根据用户部分输入,显示完整信息列表,供用户选择。AutoCompleteTextView控件与显示信息的关联是通过...

android控件学习之十六 ProgressBar实例

ProgressBar 是一个展示进度的信息的控件,向用户显示某个比较耗时间的操作完成的百分比。因此进度条可以动态的显示进度,避免长时间地执行某个耗时操作,更好的提高用户界面的友好性。我们来简单学习他...

孙鑫MFC笔记之十六--Active控件

基本概念: 容器和服务器程序       容器应用程序时可以嵌入或链接对象的应用程序。Word 就是容器应用程序。服务器应用程序是创建对象并且当对象被双击时,可以被启动的应用程序。Excel 就是...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:altas(ajax)控件(十六):遮盖全屏幕的对话框控件ModalPopup
举报原因:
原因补充:

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