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。