Question

我在html页面上将图像保存为div。当有人点击此图片时，我想要一个弹出框打开，点击的图像也会显示在弹出框中。

您可以在此处查看http://kudosoo.com/JQUERYYTEST/dannyboy.html#

页面

查看控制台日志我可以看到下面的代码正在#go下捕获图像，但它没有显示在html中。

（请注意，在下面的js代码中，当用户在图像上方悬停时，还会产生一种效果，这样可以正常工作，因此忽略该部分）

我错过了什么？

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="js/jquery.reveal.js"></script>

        <script type="text/javascript">
        $(document).ready(function() {
            $('#go').css('cursor', 'pointer');
        $('#go').click(function(e) { 
            var imgPaht =('#go');

            $('<img src="'+ imgPaht +'">').load(function() {
                $(this).width(100).height(100).appendTo('#go');
            })

            $('#modal').reveal({ 
                animation: 'fade',               
                animationspeed: 600,              
                closeonbackgroundclick: true,  
                dismissmodalclass: 'close'  


            });
            return false;
           });
    });
        </script>

Answer 1

您可以使用该代码制作清洁和灯光弹出窗口。

jQuery(document).ready(function ($) {
    $('.popup').delay(100).fadeIn('medium');
    $('.popup,.outpopup').click(function () {
        $('.popup').stop().fadeOut('medium');
    });
});

<强>样本： http://jsfiddle.net/don/Rf6YW/

Answer 2

实际上，解决方案比我原本想做的更简单。

要在弹出窗口中显示图像，我需要做的就是将其添加到弹出框中

<div id= "go"></div>

并添加

$(this).width(100).height(100).appendTo('#content');

到

下的原始代码块

$('#go').click(function(e) {

无法使用jquery弹出显示捕获的图像

2 个答案: