AJAX Control Toolkit——ModalPopupExtender（弹出对话框&蒙板）

ModalPopupExtender，该控件的直观效果就是，当单击页面上的关联的控件时弹出对话框的同时页面出现蒙板效果，通过确定（执行一定的操作）和取消返回原页面。其实博客园“插入代码”就有点类似该控件。

  • TargetControlID -激活弹出框的元素的ID
  • PopupControlID - 弹出控件的ID
  • BackgroundCssClass - 当弹出对话框时，背景的CSS样式
  • DropShadow - 值为True时，自动为弹出的对话框添加阴影
  • OkControlID - The ID of the element that dismisses the modal popup.
  • OnOkScript - The script to run when the modal popup is dismissed using the element specified in OkControlID.
  • CancelControlID - The ID of the element that cancels the modal popup.
  • OnCancelScript - The script to run when the modal popup is dismissed using the element specified in CancelControlID.
  • PopupDragHandleControlID - The ID of the embedded element that contains the popup header and title that will be used as a drag handle.
  • X - The X coordinate of the top left corner of the modal popup. If this value is not specified, the popup will be centered horizontally.
  • Y - The Y coordinate of the top left corner of the modal popup. If this value is not specified, the popup will be centered vertically.
  • RepositionMode - A value that determines whether the popup must be repositioned when the window is resized or scrolled.
  •  1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     2 
     3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
     4 <html xmlns="http://www.w3.org/1999/xhtml">
     5 <head runat="server">
     6     <title>ModalPopup</title>
     7     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />    
     8     <script type="text/javascript">
     9     var styleToSelect;
    10     function onOk() {
    11     document.getElementById('Paragraph1').className = styleToSelect;
    12     }
    13 </script>
    14 </head>
    15 <body>
    16 <form id="form1" runat="server">
    17 <asp:ScriptManager ID="ScriptManager1" runat="server">
    18 </asp:ScriptManager>
    19 <br />
    20 <asp:LinkButton ID="LinkButton1" runat="server">Please click to select an alternate text style.</asp:LinkButton><br />
    21 <br />
    22 <div>
    23    <p id="Paragraph1">
    24      <a href="http://joeon.net"><span style="color: #3366cc">Joe Stagner</span></a>,
    25       a member of the Microsoft product team, builds a CascadingDropDown sample application
    26       that demonstrates two fundamental benefits of AJAX-enabled web applications, namely
    27       web service integration and asynchronous page updates.
    28    </p>
    29    <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none" Width="233px">
    30    <p id="title">Choose the style you would like:</p>
    31    <input id="RadioA" name="Radio" onclick="styleToSelect = 'sampleStyleA';" type="radio" />
    32    <label class="sampleStyleA" for="RadioA">Choose THIS Style.</label><br />
    33    <input id="RadioB" name="Radio" onclick="styleToSelect = 'sampleStyleB';" type="radio" />
    34    <label class="sampleStyleB" for="RadioB">Choose THIS Style.</label><br />
    35    <input id="RadioC" name="Radio" onclick="styleToSelect = 'sampleStyleC';" type="radio" />
    36    <label class="sampleStyleC" for="RadioC">Choose THIS Style.</label><br />
    37    <input id="RadioD" name="Radio" onclick="styleToSelect = 'sampleStyleD';" type="radio" />
    38    <label class="sampleStyleD" for="RadioD">Choose THIS Style.</label><br />
    39    <br />
    40    <div align="center">
    41       <asp:Button ID="OkButton" runat="server" Text="OK" />
    42       <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
    43    </div>
    44    </asp:Panel>
    45    <br />
    46    
    47    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
    48              TargetControlID="LinkButton1"
    49              PopupControlID="Panel1"
    50              BackgroundCssClass="modalBackground"
    51              DropShadow="true"
    52              OkControlID="OkButton"
    53              OnOkScript="onOk()"
    54              CancelControlID="CancelButton"
    55               />
    56    </div>
    57 </form>
    58 </body>
    59 </html>

  • CSS>>

  • .watermark {
        background    : #FFAAFF;
    }

    .popupControl     {
        background-color    :#AAD4FF;
        position    :absolute;
        visibility    :hidden;
        border-style    :solid;
        border-color    : Black;
        border-width    : 2px;
    }

    .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;
    }

    　　

posted @ 2011-08-02 10:28  January  阅读(1452)  评论(1)  编辑  收藏  举报