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代碼運行時，第二次沒有得到相同的結果

回答

相關問題