javascript - 如何通过jquery花式框打开框中的图像

我想在花式框窗口中打开图像...
我试图这样做...但这无法正常工作

我尝试了下面的代码：

$('#show_dialog').click(function() {

    $.fancybox({
        type: 'inline',
        content: '#img_url'
    });
});

通过这种方式，我称我的花式框窗口：

 <td class="center" style="border:#f4f4f4 1px solid; padding:10px"><a href="#" id="show_dialog" >Show Image</a></td>
    </tr>

这是我要显示的div：

<div style="display:none;">
    <div id="img_url"> <img src="<?php echo $image_with_url?>" />
    <div style="background:#f4f4f4; color:#00; padding:10px;">
<p style="float:right; font-weight:bold;">Invoice No. : <?php echo $ordmaster['invoice_number'];?></p>
<p style="float:left; font-weight:bold;">Date : <?php echo getDateFormat($ordmaster['order_received_date'],1);?></p>
  </div>
  <div>
          <?php if($formPage==''){?>
          <img src="<?php echo theme_url(); ?>images/print-icon.png" alt="" style="vertical-align:middle; margin-right:5px;" /><a href="javascript:void(0);" onclick="print();" style="color:#1e1e1e; text-decoration:none;  font-size:12px; "><span >Print Page</span></a><?php }?></div>

    </div>
    </div>

最佳答案

尝试用href替换内容

$('#show_dialog').click(function() {

    $.fancybox({
        type: 'inline',
        href: '#img_url'
    });
});

还有另一种方法可以做到这一点

您的标记html将是

<td class="center" style="border:#f4f4f4 1px solid; padding:10px"><a href="#img_url" id="show_dialog" >Show Image</a></td>
        </tr>

然后像这样叫你的fancybox

$("a#show_dialog").fancybox({});

关于javascript - 如何通过jquery花式框打开框中的图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24823143/