星空网 > 软件开发 > ajax

Atlas学习手记(11):使用ModalPopupExtender

ModalPopup是AtlasControlToolkit中提供的一个Extender,本文将会用它来实现一个类似模态的确定对话框,并实现灰屏效果。

 

主要内容

1.ModalPopup Extender介绍

2.完整示例

 

一.ModalPopup Extender介绍

用过网易邮箱的朋友,都应该对这个界面非常熟悉,有一个确定对话框(其实不是对话框),并且具有灰屏效果:

Atlas学习手记(11):使用ModalPopupExtender

本文将看看如何使用ModalPopup Extender来实现类似于这样的效果。ModalPopup的示例代码如下,每个ModalPopupExtender都必须添加ModalPopupProperties:

Atlas学习手记(11):使用ModalPopupExtender<atlastoolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server">
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender    <atlastoolkit:ModalPopupProperties 
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        TargetControlID="DeleteButton" 
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        PopupControlID="ConfirmtionPanel"
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        OkControlID="YesButton" 
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        OnOkScript="onYes()" 
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        CancelControlID="NoButton" 
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        OnCancelScript="onNo()"
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        BackgroundCssClass="modalBackground">
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender    </atlastoolkit:ModalPopupProperties>
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender</atlastoolkit:ModalPopupExtender>

它的属性如下:

属性

说明

TargetControlID

触发ModalPopup的控件ID

PopupControlID

作为ModalPopup显示的控件ID

OkControlID

确定控件ID

OnOkScript

确定后要执行的JS代码

CancelControlID

取消控件ID

OnCancelScript

取消后要执行的JS代码

BackgroundCssClass

当显示ModalPopup时的背景CSS样式

DropShadow

是否为ModalPopup添加drop-shadow效果

二.完整示例

下面我们看这个具体的示例[来自于http://blogs.vertigosoftware.com/],点击一个删除按钮,弹出确定对话框,如果用户选择YES,将在街面上显示Item deleted,否则显示Action canceled。首先我们用一个Panel来作为Popup对话框,在它上面有提示的文本,确定和取消按钮:

Atlas学习手记(11):使用ModalPopupExtender<asp:Panel ID="ConfirmtionPanel" runat="server" CssClass="modalPopup" Style="display: none">
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender    <div class="modalPopup-text">
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        Are you sure you want to delete this item?<br />
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        <br />
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        <asp:Button ID="YesButton" runat="server" Text="Yes"/>&nbsp;&nbsp;
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        <asp:Button ID="NoButton" runat="server" Text="No" />
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender    </div>
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender</asp:Panel>

这里特别要注意一下的就是为Panel设置,在初始的界面中隐藏,直到点击按钮的时候才会触发它显示。然后用一个Button来做为TargetControl,用来触发ModalPopup,用Label显示文本。

Atlas学习手记(11):使用ModalPopupExtender<asp:Button ID="DeleteButton" runat="server" Text="Delete Item" /><br />
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender<asp:Label ID="Label1" runat="server" Text="" CssClass="feedback"></asp:Label>

下面就是添加ModalPopupExtender了,设置它的相关属性如下:

Atlas学习手记(11):使用ModalPopupExtender<atlastoolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server">
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender    <atlastoolkit:ModalPopupProperties 
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        TargetControlID="DeleteButton" 
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        PopupControlID="ConfirmtionPanel"
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        OkControlID="YesButton" 
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        OnOkScript="onYes()" 
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        CancelControlID="NoButton" 
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        OnCancelScript="onNo()"
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        BackgroundCssClass="modalBackground">
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender    </atlastoolkit:ModalPopupProperties>
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender</atlastoolkit:ModalPopupExtender>

定义CSS样式,为了实现灰屏效果,注意modalBackground样式:

Atlas学习手记(11):使用ModalPopupExtenderAtlas学习手记(11):使用ModalPopupExtender<style type="text/css">Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtenderAtlas学习手记(11):使用ModalPopupExtender    body {Atlas学习手记(11):使用ModalPopupExtender}{
Atlas学习手记(11):使用ModalPopupExtender        font:normal 10pt/13pt Arial, Verdana, Helvetica, sans-serif;
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        color:#666;
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        margin:20px;
Atlas学习手记(11):使用ModalPopupExtender     }
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtenderAtlas学习手记(11):使用ModalPopupExtender    .modalBackground {Atlas学习手记(11):使用ModalPopupExtender}{
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        background-color:#000;
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        filter:alpha(opacity=80);
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        opacity:0.8;
Atlas学习手记(11):使用ModalPopupExtender     }
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtenderAtlas学习手记(11):使用ModalPopupExtender    .modalPopup img {Atlas学习手记(11):使用ModalPopupExtender}{
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        border:solid 5px #fff;
Atlas学习手记(11):使用ModalPopupExtender     }
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtenderAtlas学习手记(11):使用ModalPopupExtender    .modalPopup-text {Atlas学习手记(11):使用ModalPopupExtender}{
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        display:block;
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        color:#000;
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        background-color:#E6EEF7;
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        text-align:center;
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        border:solid 1px #73A2D6;
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        padding:10px;
Atlas学习手记(11):使用ModalPopupExtender     }
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtenderAtlas学习手记(11):使用ModalPopupExtender    .modalPopup-text input {Atlas学习手记(11):使用ModalPopupExtender}{
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        width:75px;
Atlas学习手记(11):使用ModalPopupExtender     }
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender    .feedback
Atlas学习手记(11):使用ModalPopupExtenderAtlas学习手记(11):使用ModalPopupExtender    {Atlas学习手记(11):使用ModalPopupExtender}{
Atlas学习手记(11):使用ModalPopupExtender        color: #00cc00;
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        font-weight: 700;
Atlas学习手记(11):使用ModalPopupExtender     }
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender</style>

最后编写一点简单的JS脚本,作为OnOkScript和OnCancelScript:

Atlas学习手记(11):使用ModalPopupExtenderAtlas学习手记(11):使用ModalPopupExtender<script type="text/javascript">Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtenderAtlas学习手记(11):使用ModalPopupExtender    function onYes() Atlas学习手记(11):使用ModalPopupExtender{
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender       document.getElementById('Label1').innerText = 'Item deleted';
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender    }
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtenderAtlas学习手记(11):使用ModalPopupExtender    function onNo() Atlas学习手记(11):使用ModalPopupExtender{
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender        document.getElementById('Label1').innerText = 'Action canceled';
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender    }
Atlas学习手记(11):使用ModalPopupExtender
Atlas学习手记(11):使用ModalPopupExtender</script>

至此,大功告成。编译运行:

Atlas学习手记(11):使用ModalPopupExtender

点击按钮后就可以看到效果了:

Atlas学习手记(11):使用ModalPopupExtender

完整示例下载:http://files.cnblogs.com/Terrylee/ModalPopupDemo.rar

原标题:Atlas学习手记(11):使用ModalPopupExtender

关键词:atlas

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

海外仓挑选常踩坑,跨境电商卖家该如何正确挑选海外仓?:https://www.goluckyvip.com/news/10851.html
抢滩中东新蓝海,沙特物流却成拦路虎?:https://www.goluckyvip.com/news/10852.html
这些过冬神器继续走红欧洲!欧美运费全线下跌|跨境热点速递 :https://www.goluckyvip.com/news/10853.html
达飞海运:征收旺季附加费和超重附加费 :https://www.goluckyvip.com/news/10854.html
聚焦物流大事件 | “苏拉”远去,港口码头面临严重拥堵 :https://www.goluckyvip.com/news/10855.html
干货 | 什么是空运特殊货物? :https://www.goluckyvip.com/news/10856.html
从园岭新村到大梅沙海滨总站坐什么车:https://www.vstour.cn/a/363191.html
七月份适合去日本旅游吗 7月份去日本哪里好玩:https://www.vstour.cn/a/363192.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流