Question

我想在弹出窗口中显示数据。单击图像将显示弹出窗口。但是数据没有显示出来。

javascript代码：

<script type="text/javascript">
    $(document).ready(function () {
        $('.popup').click(function () {
            $('.box').show("slow");
            $('.close').show("slow");
        })
        $('.close').click(function () {
            $('.box').hide("slow");
        })
    })
</script>

点击图片1弹出窗口显示，点击图片11，图片可以显示在弹出窗口中，但不起作用。

<asp:Image ID="Image1" runat="server" CssClass="popup"  />
<div class="box">
    <div class="close">
        ×
    </div>
    <center>

    <asp:Image ID="Image11" runat="server" CssClass=bigpic />
    </center>
</div>

图像显示但很快消失！

Answer 1

您可以使用jQuery UI库来显示弹出窗口，这是一个例子：

<强>使用Javascript：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function () {
        $('.popup').click(function () {
            $(".box").dialog({
                title: "jQuery Dialog Popup",
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
        });
    });
</script>

<强> .ASPX：

<asp:Image ID="Image1" runat="server" CssClass="popup" ImageUrl="~/Images/img1.jpg" />
<div class="box">
    <asp:Image ID="Image11" runat="server" CssClass="bigpic" />
</div>

在asp.net的弹出窗口中显示数据

1 个答案: