Question

我需要弹出一个面板并在ajax模式弹出窗口中显示它。但不知怎的，它没有像它想象的那样工作！我需要通过单击按钮来调用modalpopupextender，但是当我加载页面时，它只是显示所有内容，单击按钮没有任何反应。

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.modalBackground
{
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}
.modalPopup
{
    background-color: #ffffdd;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
    width: 250px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
     <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>

  <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:Button ID="Button1" runat="server" Text="Button" />


<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
    BackgroundCssClass="modalBackground"
    PopupControlID="Panel1"
    TargetControlID="Button1"
    CancelControlID="BtnClose"
    OkControlID="BtnOK"
    ></ajaxToolkit:ModalPopupExtender>        
    <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup">
    <h2>this is modal popup</h2>
    <p> update data ?</p><br />
    <asp:Button ID="BtnClose" runat="server" Text="Cancel" />
    <asp:Button ID="BtnOK" runat="server" Text="OK" />
</asp:Panel>
<br />
</form>
</body>
</html>

它的外观如下：

enter image description here

Answer 1

更改你的CSS。

 <style type="text/css">
    .modalBackground
    {
        background-color: Gray;
        filter: alpha(opacity=70);
        opacity: 0.7;
    }
    .modalPopup
    {
        background-color: #ffffdd;
        border-width: 3px;
        border-style: solid;
        border-color: Gray;
        padding: 3px;
        width: 250px;
    }
</style>

并设置ModalPopupExtender控件属性BackgroundCssClass =“modalBackground”。面板CssClass =“modalPopup”。

Answer 2

ajaxToolkit不能很好地工作（我已经遇到了很多问题）！尝试使用prettyPhoto：

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Answer 3

将以下内容添加到您的页面中：

<ajaxToolkit:ToolScriptManager>
etc.

然后将Panel放入UpdatePanel

Ajax模式弹出扩展器不起作用，并在页面加载时显示面板

3 个答案: