如何使用jQuery将图像添加到对话框表单

I am working on MVC application and on one of my pages I have an image gallery. I want to do the following: when I click on any given image to open a modal dialog and display the image (the reason for that is because I don't have much space on my page).

我正在研究MVC应用程序，在我的一个页面上，我有一个图像库。我想要做以下事情：当我点击任何给定的图像打开模态对话框并显示图像时（原因是因为我的页面上没有太多空间）。

Javascript code:

Javascript代码：

 function openDialog(url)
{
    $("#dialog-form").dialog("open");
    document.getElementById("dialog-form").style ="display: block;"
    document.getElementById("modalImg").src = url;

}

$( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 800,
    width: 850,
    modal: true,
    buttons: {

        Cancel: function() {
            $( this ).dialog( "close" );
        }
    },
    close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
    }
});

Razer View:

Razer查看：

<div style="height: auto; width: 100%;">


            @foreach (var photo in Model.Application.Screenshots.Where(p => p.Device == 1))
            {
                <div style="float: left; width: 250px;">
                    <img alt='Patka' src='@Url.Content(photo.Url)' width='250' onclick="openDialog('@Url.Content(photo.Url)')"/>
                </div>

            }

            <div id="dialog-form" title="Screenshot Preview" style="display: none;">
                <img alt='ModalPatka' id="modalImg" src=".."/>
            </div>

            <div style="clear: both;"></div>
        </div>

However when I click on any image nothing happens. Any idea why?

但是，当我点击任何图像时，没有任何反应。知道为什么吗？

1 个解决方案

#1

Are you getting any javascript errors in your console (Firebug for Firefox or the Chrome debug console)? I am not sure of the exact problem, but I can say that you should probably clean up your javascript and use the full power of jQuery selectors, this might help solve your issue.

您是否在控制台中遇到任何javascript错误（Firebug for Firefox或Chrome调试控制台）？我不确定确切的问题，但我可以说你应该清理你的javascript并使用jQuery选择器的全部功能，这可能有助于解决你的问题。

Here are the changes that I would recommend:

以下是我建议的更改：

Place a class on your preview images so that we can attach a jQuery handler to the click of that element.
在预览图像上放置一个类，以便我们可以将jQuery处理程序附加到该元素的单击上。
I am not sure if .src is a valid jQuery selector on an element. Try using the .attr() designator
我不确定.src是否是元素上的有效jQuery选择器。尝试使用.attr（）指示符
Let's remove the GetElementById calls in your JavaScript and use the jQuery selectors
让我们删除JavaScript中的GetElementById调用并使用jQuery选择器
I think the dialog call needs to be in your .Ready jQuery function. See the examples here
我认为对话框调用需要在你的.Ready jQuery函数中。请参阅此处的示例
Update your DOM elements before calling the .Dialog function to prevent screen flashing.
在调用.Dialog函数之前更新DOM元素以防止屏幕闪烁。
Remove the spaces in your jQuery selectors, I dont think this is causing an issue, but it would not hurt to clean those up as well (e.g. (this) instead of ( this ))..even though the jQuery UI examples have them, maybe this is just a coding style concern.
删除你的jQuery选择器中的空格，我不认为这会导致一个问题，但是同样清理它们也不会有害（例如（this）而不是（this））..即使jQuery UI示例有它们，也许这只是一种编码风格问题。

JavaScript Code

JavaScript代码

$(function(){
    $(".OpenDialog").on("click", function(){
        $("#dialog-form").style ="display: block;";
        $("#modalImg").attr("src", $(this).attr("src"));
        $("#dialog-form").dialog({
           autoOpen: false,
           height: 800,
           width: 850,
           modal: true,
           buttons: {    
               Cancel: function() {
                   $(this).dialog("close");
               }
           },
           close: function() {
               allFields.val("").removeClass("ui-state-error");
           }
       });
    });    
});

Razor View

剃刀视图

<div style="height: auto; width: 100%;">
    @foreach (var photo in Model.Application.Screenshots.Where(p => p.Device == 1))
    {
        <div style="float: left; width: 250px;">
            <img alt='Patka' src='@Url.Content(photo.Url)' width='250' class="OpenDialog"/>
        </div>
    }

    <div id="dialog-form" title="Screenshot Preview" style="display: none;">
        <img alt='ModalPatka' id="modalImg" src=".."/>
    </div>

    <div style="clear: both;"></div>
</div>

#1