jQuery的不執行正確的方式

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); 

     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.fadeIn('slow') 
     contentBox.animate({ 
      opacity: 1, 
      width:w+"px", 
      height:h+"px", 
      top:endTop+"px", 
      left:endLeft+"px" 
     }, 1000, "easeOutExpo"); 

     box.click(function(){ 
      box.fadeOut(); 
      contentBox.fadeOut(); 
     }); 
    } 

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

和我的CSS也低於

.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%; 
} 

和HTML

<a href="#useThisDiv" class="btn blue btn-xs darkBox">Show Box</a> 
<div id="useThisDiv" width="500" height="500"> 
    <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> 

我不能找出問題出在哪裏，但是我的問題是，當我點擊類別爲darkBox的錨標記時，它只是將我重定向到另一個頁面。它實際上創建var box div和一秒鐘內消失我目前的jquery工作正常，沒有這一個..請幫助

如果你不能解決這個問題，我只想打開一個彈出div每次用戶點擊一個按鈕，背景應該變得稍微不透明，用戶可以在該框上輸入數據。

有什麼想法？

Answer 1

您需要防止點擊事件的默認行爲與preventDefault。現在您的瀏覽器將被重定向到#useThisDiv。

更新您的代碼：

$('.darkBox').each(function(){ 
    var div = $($(this).attr('href')); 
    div.hide(); 
    $(this).click(function(event){ 
     event.preventDefault(); 
     darkBox(div); 
    }); 
}); 

或者，使用data-屬性，而不是href來定義這種額外的功能。見this Fiddle。