Ajax 弹对话出框

        本文将使用AjaxToolkit中的“ PopupControlExtender ， DynamicPopulateExtender ， DragPanelExtender ”控件来构建一个弹出对话框，可以实现弹出对话框，对话框可拖动等功能。比较适合做每日一贴等效果

 

       首先解释下下，三个控制的作用：

 

1. PopupControlExtender:是一个可以控制Popup载体的组件，它本身 并不会产生Popup控件，它的作用是控制Popup载体，例如panel，div等的显示.
2. DynamicPopulateExtender:是一个可以实现动态效果的组件.
3. DragPanelExtender:实现拖拽效果的组件.

首先我们需要创建一个Popup的载体，这里我们采用asp.net 的Panel控件, 具体代码如下：

 

  <asp:Panel ID="pnlPopup" runat="server" CssClass="frame" Style="display: none" mce_Style="display: none"> <div class="overlay"> <asp:Panel ID="pnlHeader" runat="server" CssClass="header"> <asp:Label ID="Label1" runat="server" CssClass="msg" Text="Tip of the Day" /> <asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('popup').hidePopup(); return false;" /> </asp:Panel> <asp:Panel ID="pnlBody" runat="server" CssClass="body"> <%= NextTip() %> </asp:Panel> <div class="footer"> <asp:Button ID="btnNextTip" runat="server" Text="Next Tip" OnClientClick="return false;" /> <asp:Button ID="Button1" runat="server" Text="Close" OnClientClick="$find('popup').hidePopup(); return false;" /> </div> </div> <div class="underlay"> </div> </asp:Panel> <asp:Button ID="btnPopup" runat="server" Text="Show Tip of the Day" OnClientClick="return false;" /> <%// The extender that displays and positions the panel %> <ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" BehaviorID="popup" TargetControlID="btnPopup" Position="Right" PopupControlID="pnlPopup" /> <%// The extender that populates the tip %> <ajaxToolkit:DynamicPopulateExtender ID="DynamicPopulateExtender1" runat="server" ClearContentsDuringUpdate="false" PopulateTriggerControlID="btnNextTip" TargetControlID="pnlBody" UpdatingCssClass="updating" ServiceMethod="NextTip" /> <%// The extender that provides drag and drop behavior %> <ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server" DragHandleID="pnlHeader" TargetControlID="pnlPopup" />

 

以下是用到的CSS代码：

.demo{ font-family:arial,helvetica,clean,sans-serif; font-size:small; margin:20px 30px; padding:10px; width:95%; height:800px; border:solid 1px #000; background-color: aliceblue; }.frame{position:absolute; font-family:arial,helvetica,clean,sans-serif; font-size:small; padding:2px 3px; width:400px;}.overlay{ border:solid 1px #808080; border-width:1px 1px;} .underlay{ position:absolute; background-color:#000; bottom:-1px; filter:alpha(opacity=5); left:-1px; right:-1px; top:3px; z-index:-1;}.header{cursor: move; /* Because the DragPanelExtender doesn't do this for me ;( */background: url(../Image/yui/sprite.png) repeat-x 0px -200px;color: #000;border-bottom: solid 1px #ccc;padding: 3px 10px;background: url(../Image/yui/sprite.png) repeat-x 0px -200px;} .header .msg{ font-weight: bold;} .updating, .body{ background-color:#fff; padding:10px;}.updating{color:#808080;background:#fff url(../Image/yui/activity.gif) no-repeat center;} .footer{ text-align:right; background: url(../Image/yui/sprite.png) repeat-x 0px -200px; color: #000; border-top:solid 1px #ccc; padding: 5px 3px;}.close{ right: 7px; background: url(../Image/yui/sprite.png) no-repeat 0px -300px; width: 25px; cursor: pointer; position: absolute; top: 7px; height: 15px;}