如何像facebook图像查看器一样打开ajax模式弹出扩展器?

时间:2011-08-10 13:08:05

标签: asp.net ajax ajaxcontroltoolkit

我想在visual studio 2010的.aspx页面中使用ajax ModelpopupExtender控件。当用户点击任何按钮时,它应该打开像facebook打开弹出框以显示照片的弹出窗口。这意味着弹出应该以这样一种方式打开,它应该禁用背景,直到单击该弹出窗口的关闭按钮。如何打开页面或面板或该弹出窗口中的任何其他内容。请提一下明确的步骤。我甚至不知道如何做到这一点?

提前致谢...

1 个答案:

答案 0 :(得分:0)

<%@ Page Language="C#" AutoEventWireup="true"  
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" 
Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!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>Ajax Model PopUp Extender With MouseOver Example</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">

        function MouseHover() 
     {
         $find("modelPopupExtender1").show();
     }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
<ajaxToolkit:ToolkitScriptManager ID="toolKitScriptManager1" 
                                  runat="server">
</ajaxToolkit:ToolkitScriptManager>    
<p style="background-color: #9999FF; width: 95%;">

Example of using a ModalPopupExtender with with Mouse Over
<br/></p><br/>
Hover over the hyperlink 
<asp:HyperLink ID="HyperLink1" runat="server" 
               onmouseover="MouseHover();" 
               Font-Underline="True" ForeColor="Blue">
<b>Mouse Over Here to Open PopUp</b>
</asp:HyperLink> to open pop up

<ajaxToolkit:ModalPopupExtender runat="server" 
                   BehaviorID="modelPopupExtender1" 
                   TargetControlID="HyperLink1"
                   PopupControlID="popUpPanel" 
                   OkControlID="btnOk" 
                   BackgroundCssClass="modalBackground" >
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="popUpPanel" runat="server" 
           CssClass="confirm-dialog">
<div class="inner">
<h2>
Thanks For Visiting This Site</h2>
<div class="base">
<asp:Button ID="btnOk" runat="server" Text="Ok"/>
<asp:LinkButton ID="LinkButton1" runat="server" 
                CssClass="close" 
OnClientClick="$find('modelPopupExtender1').hide(); return false;"/>
</div></div>
</asp:Panel>



    </div>
    </form>
</body>
</html>

BackgroundCssClass =“modalBackground”您是否注意到此行是您为背景定义css的地方。

我认为这应该有用 Reference