如何像Facebook图像查看器一样打开ajax模型弹出扩展器？

发布于 2024-11-28 18:20:57 字数 219 浏览 1 评论 0原文

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

提前致谢...

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧伤慢歌 2024-12-05 18:20:57

<%@ 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 的地方。

我认为这应该可行。
参考

<%@ 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" did you notice this line this is where you define the css for the background.

I think this should work.
Reference

回复收藏 0 原文

~没有更多了~