Fork me on GitHub

ModalPopupExtender的用法

新邮箱上永久删除邮件那个效果不错吧,今天就用ModalPopupExtender来实现类似的效果.
先看Aspx的代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ModalPopup Demonstration.aspx.cs" Inherits="ProgressBehavior" %>
<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="cc1" %>

 

<!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>无标题页</title>

    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

      

    <script type ="text/javascript" >   

     function onCancel()

     {

     var aa=document.getElementById("TextBox1");    

     aa.value="你没有做任何操作！";

     }

     function onOk()

     {    

       var ss=document.getElementById("DropDownList1"); 

       document.getElementById("TextBox1").style.backgroundColor=ss.value;

       document.getElementById("TextBox1").value="你选择了"+ss.value;         

     }  

    </script>

  

</head>

<body style="font-size: small">

    <form id="form1" runat="server">

 <atlas:ScriptManager ID="gsw" runat ="server" >

 </atlas:ScriptManager>          

        <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server">

        <cc1:ModalPopupProperties 

        TargetControlID="Button3"

        PopupControlID="Panel3"

        BackgroundCssClass="modalBackground"

        DropShadow="true"

        OkControlID="Button1"

        OnOkScript="onOk()"

        CancelControlID="Button2"

         OnCancelScript ="onCancel()"/>

        </cc1:ModalPopupExtender>

        <asp:Button ID="Button3" runat="server" Text="选择TextBox颜色" /><br />

      

                <asp:TextBox ID="TextBox1"   runat="server" Height="106px" Width="274px" ></asp:TextBox>

        <br />

          <br />      

     

           <div ID="Panel3" style=" background-color :skyblue " >

               <table style="width: 124px">

                   <tr>

                       <td colspan="2" rowspan="2" style="vertical-align: top; height: 44px;">

                           <asp:DropDownList ID="DropDownList1" runat="server" Width="166px" Height="149px">

                   <asp:ListItem Value="Red">红色</asp:ListItem>

                   <asp:ListItem Value="Green">绿色</asp:ListItem>

                   <asp:ListItem Value="Blue">蓝色</asp:ListItem>

                   <asp:ListItem Value="NavajoWhite">不知道</asp:ListItem>

                   <asp:ListItem Value="Yellow">黄色</asp:ListItem>

                   <asp:ListItem Value="silver"></asp:ListItem>

               </asp:DropDownList></td>

                   </tr>

                   <tr>

                   </tr>

                   <tr>

                       <td style="height: 26px;" colspan="2">

            <asp:Button ID="Button1" runat="server" Text="选择" OnClick="Button1_Click" />

               &nbsp;

            <asp:Button ID="Button2" runat="server" Text="取消" /></td>

                   </tr>

               </table>

        </div>

    </form>

</body>

</html>

其中为个外联样式表

 <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

中的StyleSheet代码如下:

.modalBackground {

     background-color:Gray;

     filter:alpha(opacity=30);

     opacity:0.7;

}

如果有兴趣,可以做的更靓点!自己处理!呵呵

posted @ 2006-07-14 09:00  桂素伟  阅读(4184)  评论(1)  编辑  收藏  举报