如何使用jQuery将图像添加到对话框窗体

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

<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

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

下面是我建议的更改：

1. 将一个类上的预览图像，这样我们可以附加一个jQuery处理该元素的点击。
2. 我不确定.src是否是元素上的有效jQuery选择器。尝试使用.attr（）指示符
3. 让我们删除JavaScript中的GetElementById调用并使用jQuery选择器
4. 我认为对话框调用需要位于您的.Ready jQuery函数中。请参阅示例here
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"); 
      } 
     }); 
    });  
}); 

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>