Question

我有以下jquery代码

$(function(){
    function darkBox(div){
        var w = (div.attr('width')) ? div.attr('width') : div.width();
        var h = (div.attr('height')) ? div.attr('height') : div.height();

        var box = $('<div></div>').addClass('darkCover');
        $('body').prepend(box);
        box.fadeTo('fast', 0.8);
        $(this).keydown(function(e){
            if(e.keyCode == 27){
                box.hide();
                contentBox.hide();
            }
        });

        var contentBox = $('<div></div>').html(div.html());
        contentBox.addClass('darkContent');

        var x = $(window).width()/2;
        var y = $(window).height()/2;
        var startW = h-y/2;
        var startH = w-x/2;
        var endTop = y - h/2;
        var endLeft = x - w/2;

        contentBox.css("left", x+"px");
        contentBox.css("top", startW+"px");
        contentBox.css("z-index", "910");
        contentBox.css("width", w+"px");
        contentBox.css("height", h+"px");

        $('body').prepend(contentBox);

        contentBox.animate({
            opacity: 1,
            width:w+"px",
            height:h+"px",
            top:endTop+"px",
            left:endLeft+"px"
        }, 1000, "easeOutExpo");


    }

    $('.darkBox').each(function(){
        var div = $($(this).attr('data-target'));
        div.hide();
        $(this).click(function(){
            darkBox(div);
        });
    });

});

修改 HTML：

<a href="javascript:;" data-target="#useThisDiv1" class="btn blue btn-xs darkBox">Show Box1</a>
<div id="useThisDiv1" width="500" height="500">
    <h3 class="breadcrumb">Div1</h3>
    <table>
        <tr>
            <td>
                array index and a corresponding array value each time. (The value can also be accessed through the this keyword, 
            </td>
        </tr>
        <tr>
            <td>
                array index and a corresponding array value each time. (The value can also be accessed through the this keyword, 
            </td>
        </tr>
        <tr>
            <td>
                array index and a corresponding array value each time. (The value can also be accessed through the this keyword, 
            </td>
        </tr>
    </table>
</div>

.darkContent{
    position: fixed;
    background-color: white;
    border: 5px solid black;
    padding: 8px;
    overflow: hidden;
    color: #333;
    font-family: arial;
}
.darkCover{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 900;
    background-color: black;
    opacity: 0;
    width: 100%;
    height: 100%;
}

结束编辑

在上面的代码中，如果我第一次点击它，我得到一个不透明度为80％的黑色背景，但如果我再次点击它我得到白色背景。我将向您展示这两个屏幕截图

背景不透明的图片 Image with opaque background

带有白色背景的图像 Image with white background

并且在代码上非常珍贵，以下代码只执行一次我猜

var box = $('<div></div>').addClass('darkCover');
$('body').prepend(box);
box.fadeTo('fast', 0.8);

每次单击按钮打开弹出窗口时，我都可以运行上面的代码......有什么建议吗？

此致

Answer 1

这是完整的html页面。它工作正常，我只需要删除缓和因为我没有包含它。这与你的代码相同，只添加删除部分以保持干净的html，在chrome中测试。

<html> 
<head> 
<title>Test Page</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>

.darkContent{
    position: fixed;
    background-color: white;
    border: 5px solid black;
    padding: 8px;
    overflow: hidden;
    color: #333;
    font-family: arial;
}
.darkCover{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 900;
    background-color: black;
    opacity: 0;
    width: 100%;
    height: 100%;
}
</style>

</head> 
<body> 
    <a href="javascript:;" data-target="#useThisDiv1" class="btn blue btn-xs darkBox">Show Box1</a>
<div id="useThisDiv1" width="500" height="500">
    <h3 class="breadcrumb">Div1</h3>
    <table>
        <tr>
            <td>
                array index and a corresponding array value each time. (The value can also be accessed through the this keyword, 
            </td>
        </tr>
        <tr>
            <td>
                array index and a corresponding array value each time. (The value can also be accessed through the this keyword, 
            </td>
        </tr>
        <tr>
            <td>
                array index and a corresponding array value each time. (The value can also be accessed through the this keyword, 
            </td>
        </tr>
    </table>
</div>
    <script>
     $(function(){
    function darkBox(div){
        $('.darkCover').remove();
        $('.darkContent').remove();
        var w = (div.attr('width')) ? div.attr('width') : div.width();
        var h = (div.attr('height')) ? div.attr('height') : div.height();

        var box = $('<div></div>').addClass('darkCover');
        $('body').prepend(box);
        box.fadeTo('fast', 0.8);
        $(this).keydown(function(e){
            if(e.keyCode == 27){
                box.hide();
                contentBox.hide();
            }
        });

        var contentBox = $('<div></div>').html(div.html());
        contentBox.addClass('darkContent');

        var x = $(window).width()/2;
        var y = $(window).height()/2;
        var startW = h-y/2;
        var startH = w-x/2;
        var endTop = y - h/2;
        var endLeft = x - w/2;

        contentBox.css("left", x+"px");
        contentBox.css("top", startW+"px");
        contentBox.css("z-index", "910");
        contentBox.css("width", w+"px");
        contentBox.css("height", h+"px");

        $('body').prepend(contentBox);

        contentBox.animate({
            opacity: 1,
            width:w+"px",
            height:h+"px",
            top:endTop+"px",
            left:endLeft+"px"
        }, 1000);


    }

    $('.darkBox').each(function(){
        var div = $($(this).attr('data-target'));
        div.hide();
        $(this).click(function(){
            darkBox(div);
        });
    });

});
    </script> 
</body> 
</html>

第二次运行时的jquery代码没有得到相同的结果

1 个答案: