如何像 facebook 图像查看器一样打开 ajax 模态弹出扩展器？答案

【问题标题】：How to open ajax model popup extender just like facebook image viewer?如何像 facebook 图像查看器一样打开 ajax 模态弹出扩展器？
【发布时间】：2011-08-10 13:08:05
【问题描述】：

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

提前谢谢...

【问题讨论】：

标签： asp.net ajax ajaxcontroltoolkit

【解决方案1】：

<%@ 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

【讨论】：