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工作没有这个...请帮助

如果您无法解决问题，我只想在每次用户点击按钮时打开一个弹出窗口，背景应该变得略微不透明，用户可以在该框上输入数据。

有什么想法吗？

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。

jquery执行方式不正确

1 个答案: