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。