Question

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

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：

<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>

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

Answer 1

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

以下是我建议的更改：

在预览图像上放置一个类，以便我们可以附加一个jQuery处理程序来点击该元素。
我不确定.src是否是元素上的有效jQuery选择器。尝试使用.attr（）指示符
让我们删除JavaScript中的GetElementById调用并使用jQuery选择器
我认为对话框调用需要在你的.Ready jQuery函数中。请参阅示例here
在调用.Dialog函数之前更新DOM元素以防止屏幕闪烁。
删除jQuery选择器中的空格，我不认为这会导致问题，但同样清理它们也不会有害（例如(this)而不是( this )）..即使jQuery UI示例包含它们，也许这只是一种编码风格问题。

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查看

<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>

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

1 个答案: