Atlas学习手记(11):使用ModalPopup Extender


本文示例源代码或素材下载

  主要内容

  1.ModalPopup Extender介绍

  2.完整示例

  一.ModalPopup Extender介绍

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

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

<atlastoolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server">
  <atlastoolkit:ModalPopupProperties
    TargetControlID="DeleteButton"
    PopupControlID="ConfirmtionPanel"
    OkControlID="YesButton"
    OnOkScript="onYes()"
    CancelControlID="NoButton"
    OnCancelScript="onNo()"
    BackgroundCssClass="modalBackground">
  </atlastoolkit:ModalPopupProperties>
</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对话框,在它上面有提示的文本,确定和取消按钮:

<asp:Panel ID="ConfirmtionPanel" runat="server" CssClass="modalPopup" Style="display: none">
  <div class="modalPopup-text">
    Are you sure you want to delete this item?<br />
    <br />
    <asp:Button ID="YesButton" runat="server" Text="Yes"/>&nbsp;&nbsp;
    <asp:Button ID="NoButton" runat="server" Text="No" />
  </div>
</asp:Panel>

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

<asp:Button ID="DeleteButton" runat="server" Text="Delete Item" /><br />
<asp:Label ID="Label1" runat="server" Text="" CssClass="feedback"></asp:Label>

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

<atlastoolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server">
  <atlastoolkit:ModalPopupProperties
    TargetControlID="DeleteButton"
    PopupControlID="ConfirmtionPanel"
    OkControlID="YesButton"
    OnOkScript="onYes()"
    CancelControlID="NoButton"
    OnCancelScript="onNo()"
    BackgroundCssClass="modalBackground">
  </atlastoolkit:ModalPopupProperties>
</atlastoolkit:ModalPopupExtender>

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

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

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

<script type="text/javascript">
  function onYes() {
    document.getElementById('Label1').innerText = 'Item deleted';
  }
  function onNo() {
    document.getElementById('Label1').innerText = 'Action canceled';
  }
</script>

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

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

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3