Question

我们在网站上添加了一个新的图库页面，该页面使用

显示一系列缩略图

我们希望显示弹出窗口以更大的格式显示图像，并且到目前为止使用了以下代码 -

    ScriptManager.RegisterStartupScript(Me, GetType(String), "New_Window", "window.open('" & webUrl & "Cacique4.jpg', null, 'height=400,width=400,status=yes,toolbar=yes,menubar=yes,location=no' );", True)

窗口显示为普通浏览器，大小仅为400x400。

有没有办法在弹出窗口中显示图像？

Answer 1

以下是一个例子：

ASPX：

<head runat="server">
    <title>Modal Popup</title>
    <style type="text/css">
        .modalStyle
        {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }

        .panelStyle
        {
            width: 300px;
            height: 180px;
            border: 2px solid Gray;
            background-color:White;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="scripManager" runat="server" />
    <asp:ModalPopupExtender ID="modal" CancelControlID="btnCancel" BackgroundCssClass="modalStyle" PopupControlID="popup" TargetControlID="lblPopup" runat="server" />
    <asp:Label ID="lblPopup" runat="server" />
    <asp:Panel runat="server" ID="popup" CssClass="panelStyle">
        <table style="width: 100%;">
            <tr>
                <td>
                    <asp:RadioButton ID="rdboption1" AutoPostBack="true" OnCheckedChanged="CheckedChanged" runat="server" Text="Option 1" GroupName="Options" /><br />
                    <asp:RadioButton ID="rdboption11" runat="server" Text="Option 1.1" GroupName="SubOption1"
                        Visible="false" /><br />
                    <asp:RadioButton ID="rdboption12" runat="server" Text="Option 1.2" GroupName="SubOption1"
                        Visible="false" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:RadioButton ID="rdboption2" AutoPostBack="true" OnCheckedChanged="CheckedChanged" runat="server" Text="Option 2" GroupName="Options" /><br />
                    <asp:RadioButton ID="rdboption21" runat="server" Text="Option 2.1" GroupName="SubOption2"
                        Visible="false" /><br />
                    <asp:RadioButton ID="rdboption22" runat="server" Text="Option 2.2" GroupName="SubOption2"
                        Visible="false" />
                </td>
            </tr>
            <tr>
                <td style="text-align: center;">
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                </td>
            </tr>
        </table>
    </asp:Panel>
    </form>
</body>

代码背后：

public partial class Test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        modal.Show();
    }

    protected void CheckedChanged(object sender, EventArgs e)
    {
        var radioButton = sender as RadioButton;
        ResetOptions();
        switch(radioButton.ID)
        {
            case "rdboption1":
                rdboption11.Visible = true;
                rdboption12.Visible = true;
                break;
            case "rdboption2":
                rdboption21.Visible = true;
                rdboption22.Visible = true;
                break;
        }   
    }

    private void ResetOptions()
    {
        rdboption11.Visible = false;
        rdboption12.Visible = false;
        rdboption21.Visible = false;
        rdboption22.Visible = false;
    }
}

在.net中打开一个新窗口以显示图像

1 个答案: