jQuery对话框，将href作为图像源加载到对话框中

问题描述

我正在尝试将图像打开到一个jQuery对话框中。当我点击href链接时，我想将此href加载到对话框中。

标记：

 < a href =www.blahblahblah.com/blah.jpgclass =slideshow_zoom> Link< / a> 
  

Jquery代码：

每个（function（）{
 var $ link = $（this）; 
 
 var $ dialog = $（'< 
 $ b $（$ link.attr（'href'））
 .dialog（{
 autoOpen：false，
可调整大小：false， 
 modal：true，
 width：1000，
 closeOnEscape：true，
 dialogClass：'zoom'
}）; 
 
 $ link .click（function（）{
 $ dialog.dialog（'open'）; 
 
 return false; 
}）; 
}）; 
  

这个标记和jquery代码只产生一个没有任何内容的对话框。我猜测它不是真正加载href ...或者也许是href需要更改为一个图像src，以便它被查看。感谢任何帮助！

解决方案

只需调用 .dialog（）方法在 img ：

  var $ dialog = $（'< ; img src ='+ $ link.attr（'href'）+'/>'）
 .dialog（{
 autoOpen：false，
 resizeable：false，
 modal：true，
 width：1000，
 closeOnEscape：true，
 dialogClass：'zoom'
}）; 
  

I am trying to open an image into a jQuery dialog. When I click on href link, I want to load this href into a dialog.

Markup:

        <a href="www.blahblahblah.com/blah.jpg" class="slideshow_zoom">Link</a>

Jquery code:

$('.slideshow_zoom').each(function() {
    var $link = $(this);

    var $dialog = $('<div></div>')
         .load($link.attr('href'))
         .dialog({
               autoOpen: false,
               resizable: false,
               modal: true,
               width: 1000,
               closeOnEscape: true,
               dialogClass:'zoom'
            });

        $link.click(function() {
            $dialog.dialog('open');

            return false;
    });
});

This markup and jquery code only produce a dialog with nothing in it. Im guessing it is not actually loading the href...or maybe it is that the href needs to be changed into an image src in order for it to be viewed. Thanks for any help!

解决方案

Just call the .dialog() method on an img:

var $dialog = $('<img src="' + $link.attr('href') + '" />')
    .dialog({
        autoOpen: false,
        resizeable: false,
        modal: true,
        width: 1000,
        closeOnEscape: true,
        dialogClass: 'zoom'
    });

这篇关于jQuery对话框，将href作为图像源加载到对话框中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！