0

我正在开发 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" );
    }
});

雷蛇视图：

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

但是，当我单击任何图像时，什么都没有发生。知道为什么吗？

4

1 回答 1

1

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

以下是我建议的更改：

  1. 在您的预览图像上放置一个类，以便我们可以将 jQuery 处理程序附加到该元素的单击上。
  2. 我不确定 .src 是否是元素上的有效 jQuery 选择器。尝试使用 .attr() 指示符
  3. 让我们删除 JavaScript 中的 GetElementById 调用并使用 jQuery 选择器
  4. 我认为对话框调用需要在您的 .Ready jQuery 函数中。请参阅此处的示例
  5. 在调用 .Dialog 函数之前更新您的 DOM 元素以防止屏幕闪烁。
  6. 删除 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");
           }
       });
    });    
});

剃刀视图

<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>
于 2013-07-15T16:08:24.040 回答