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

我有以下的jQuery代码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);

我可以运行上面的代码，每次我点击按钮打开弹出窗口...任何建议吗？

Regards

来源

2014-09-25 Sharif

隐藏它后删除

？或者你只是预先安装新的？ – 2014-09-25 14:33:35

此代码之外没有任何事情发生，有一个锚标记和一对div标记与一个唯一标识 – Sharif 2014-09-25 14:35:35

您可以发布一些示例HTML代码以使用darkBox函数吗？ – 2014-09-25 14:41:59

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

来源

2014-09-25 14:54:53

好'easeOutExpo'是jQuery UI的一部分... – Brewal 2014-09-25 15:01:20

感谢@AlexG的工作我实际上正在工作机智jQuery 1.1，将其更改为当前版本它的工作...问候 – Sharif 2014-09-25 15:01:40

它的工作原理，如果你包括jQuery UI：[demo]（http://jsfiddle.net/69L0ej90/） – Brewal 2014-09-25 15:02:03

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

回答

相关问题