Javascript jquery代码在第二次运行时不会'；我得不到同样的结果_Javascript_Jquery_Html

Javascript jquery代码在第二次运行时不会'；我得不到同样的结果

javascript jquery html

Javascript jquery代码在第二次运行时不会'；我得不到同样的结果,javascript,jquery,html,Javascript,Jquery,Html,我有以下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>').add

我有以下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);
        });
    });

});

$（函数（）{
函数暗盒（div）{
变量w=（div.attr（'width'））？div.attr（'width'）：div.width（）；
变量h=（div.attr（'height'））？div.attr（'height'）：div.height（）；
变量框=$（''）.addClass（'darkCover'）；
$（'body'）。前缀（框）；
框。fadeTo（'fast'，0.8）；
$（此）.keydown（函数（e）{
如果（e.keyCode==27）{
box.hide（）；
contentBox.hide（）；
}
});
var contentBox=$（''）.html（div.html（））；
addClass（'darkContent'）；
var x=$（窗口）.width（）/2；
变量y=$（窗口）.height（）/2；
var startW=h-y/2；
var startH=w-x/2；
var endTop=y-h/2；
var endLeft=x-w/2；
css（“左”，x+“px”）；
css（“top”，startW+“px”）；
css（“z-index”，“910”）；
css（“宽度”，w+“px”）；
css（“高度”，h+“px”）；
$（'body'）.prepend（contentBox）；
contentBox.animate({
不透明度：1，
宽度：w+“px”，
高度：h+“px”，
顶部：endTop+“px”，
左：左尾端+“px”
}，1000，“easoutexpo”）；
}
$（'.darkBox'）。每个（函数（）{
var div=$（$（this.attr（'data-target'））；
隐藏分区（）；
$（此）。单击（函数（）{
暗箱（div）；
});
});
});

编辑 HTML:


第一组
数组索引和每次对应的数组值。（也可以通过this关键字访问该值，
数组索引和相应的数组值。（也可以通过this关键字访问该值，
数组索引和相应的数组值。（也可以通过this关键字访问该值，
.黑色内容{
位置：固定；
背景色：白色；
边框：5px纯黑；
填充：8px；
溢出：隐藏；
颜色：#333；
字体系列：arial；
}
darkCover先生{
位置：固定；
左：0px；
顶部：0px；
z指数：900；
背景色：黑色；
不透明度：0；
宽度：100%；
身高：100%；
}

结束编辑

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

背景不透明的图像

白色背景图像

准确地说，下面的代码只执行一次

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

var-box=$（''）.addClass（'darkCover'）；
$（'body'）。前缀（框）；
框。fadeTo（'fast'，0.8）；

我可以在每次点击按钮打开弹出窗口时运行上述代码吗？有什么建议吗

关于

这是完整的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>


测试页
.黑色内容{
位置：固定；
背景色：白色；
边框：5px纯黑；
填充：8px；
溢出：隐藏；
颜色：#333；
字体系列：arial；
}
darkCover先生{
位置：固定；
左：0px；
顶部：0px；
z指数：900；
背景色：黑色；
不透明度：0；
宽度：100%；
身高：100%；
}
第一组
数组索引和相应的数组值。（也可以通过this关键字访问该值，
数组索引和相应的数组值。（也可以通过this关键字访问该值，
数组索引和相应的数组值。（也可以通过this关键字访问该值，
$（函数（）{
函数暗盒（div）{
$（'.darkCover'）.remove（）；
$（'.darkContent'）.remove（）；
变量w=（div.attr（'width'））？div.attr（'width'）：div.width（）；
变量h=（div.attr（'height'））？div.attr（'height'）：div.height（）；
变量框=$（''）.addClass（'darkCover'）；
$（'body'）。前缀（框）；
框。fadeTo（'fast'，0.8）；
$（此）.keydown（函数（e）{
如果（e.keyCode==27）{
box.hide（）；
contentBox.hide（）；
}
});
var contentBox=$（''）.html（div.html（））；
addClass（'darkContent'）；
var x=$（窗口）.width（）/2；
变量y=$（窗口）.height（）/2；
var startW=h-y/2；
var startH=w-x/2；
var endTop=y-h/2；
var endLeft=x-w/2；
css（“左”，x+“px”）；
css（“top”，startW+“px”）；
css（“z-index”，“910”）；
css（“宽度”，w+“px”）；
css（“高度”，h+“px”）；
$（'body'）.prepend（contentBox）；
contentBox.animate({
不透明度：1，
宽度：w+“px”，
高度：h+“px”，
顶部：endTop+“px”，
左：左尾端+“px”
}, 1000);
}
$（'.darkBox'）。每个（函数（）{
var div=$（$（this.attr（'data-target'））；
隐藏分区（）；
$（此）。单击（函数（）{
暗箱（div）；
});
});
});

这是完整的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>


测试页
.黑色内容{
位置：固定；
背景色：白色；
边框：5px纯黑；
填充：8px；
溢出：隐藏；
颜色：#333；
字体系列：arial；
}