弹出可放大/缩小的图片模态

Question

我不知道如何实现这一目标。也许有人有一个关于如何为可以放大和缩小的图像创建弹出模式的好例子？我使用 asp.net 和 vb.net 进行用户界面和编码。但我没有做过任何弹出模式，所以我不知道。

Answer 1

好的，对于简单的图像缩放，我们可以在这个 gridview 中添加一些图像：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ID" CssClass="table">
    <Columns>
        <asp:BoundField DataField="Fighter" HeaderText="Fighter" />
        <asp:BoundField DataField="Engine" HeaderText="Engine" />
        <asp:BoundField DataField="Thrust" HeaderText="Thrust" />
        <asp:BoundField DataField="Description" HeaderText="Description" />
        <asp:TemplateField HeaderText="Preview">
            <ItemTemplate>
                <asp:Image ID="Image2" runat="server" ImageUrl='<%# Eval("ImagePath") %>' Width="140" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="View">
            <ItemTemplate>
                <asp:Button ID="cmdView" runat="server" Text="View" CssClass="btn"
                    OnClick="cmdView_Click"
                    Style="margin-top: 20px" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

在上面之后，我们将使用 jquery.UI 对话框。因此，我们假设您已安装 jQuery 和 jQuery.UI。

因此，我们需要在页面上有一个“div”区域，jQuery.UI 对话框将弹出。

所以，在上面的 GridView 之后，我们有这个：

        <div id="imagepop" runat="server" style="display: none; text-align: center; height: 80%">
            <asp:Label ID="lblFighterName" runat="server" Text=""></asp:Label>
            <br />
            <asp:Image ID="FighterImage" runat="server" ClientIDMode="Static"
                Width="80%" Height="90%" />
        </div>


        <script>

            function popimage(btn) {

                pHeight = ($(window).height() * 0.96)
                pWidth = ($(window).width() * 0.80)

                myDialog = $("#imagepop");
                myDialog.dialog({
                    title: "Fighter",
                    modal: true,
                    height: pHeight,
                    width: pWidth,
                    closeText: "",
                    show: "fade",
                    buttons: {

                        Ok: function () {
                            myDialog.dialog("close")
                        }
                    }
                })
            }
        </script>

加载 GridView 的代码如下：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        Dim rstData As DataTable = MyRst("SELECT * FROM Fighters")
        GridView1.DataSource = rstData
        GridView1.DataBind()
    End If

End Sub

单击 GridView 中的简单“查看”按钮时，有以下代码：

Protected Sub cmdView_Click(sender As Object, e As EventArgs)

    Dim btn As Button = sender
    Dim gRow As GridViewRow = btn.NamingContainer

    lblFighterName.Text = gRow.Cells(0).Text

    Dim RowImage As Image = gRow.FindControl("Image2")
    FighterImage.ImageUrl = RowImage.ImageUrl

    Dim sJava As String = "popimage()"

    ' now pop our dialog to display the zoomed in image
    ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType, "MyPop", sJava, True)


End Sub

结果是这样的：

所以，点击时弹出图像，相当简单。

如果您需要在该对话框中进行某种缩放，则需要搜索 JavaScript 缩放库。