添加Jquery模式关闭按钮_Jquery_Modal Dialog

添加Jquery模式关闭按钮

jquery

添加Jquery模式关闭按钮,jquery,modal-dialog,Jquery,Modal Dialog,我在jquery上做了一个快速模式，这样当我滚动到页面底部时，我会在下角弹出一个窗口。基本上，我需要使它只出现在滚动到该部分的页面，它可以让你有一个选项来关闭它。我该如何添加关闭功能？当滚动到页面的该部分时，也可以在显示前将弹出窗口延迟几秒钟谢谢 <!DOCTYPE html> <html> <head> <title>Peekaboo</title> <script src="http://ajax

我在jquery上做了一个快速模式，这样当我滚动到页面底部时，我会在下角弹出一个窗口。基本上，我需要使它只出现在滚动到该部分的页面，它可以让你有一个选项来关闭它。我该如何添加关闭功能？当滚动到页面的该部分时，也可以在显示前将弹出窗口延迟几秒钟

谢谢

    <!DOCTYPE html>
<html>
<head>

    <title>Peekaboo</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


    <style>

    html, body {
        margin: 0;
        padding: 0;
    }
    .content {
        display: block;
        min-height: 3000px;
    }

    .peekaboo {
        position: fixed;
        right: 0;
        bottom: 0;
        display: block;
        width: 200px;
        height: 150px;
        background-color: red;
        -webkit-transition: all 0.6s ease;
        -o-transition: all 0.6s ease;
        -ms-transition: all 0.6s ease;
        transition: all 0.6s ease;
        bottom: -150px;
    }
    .peekaboo.open {
        bottom: 0;
    }
    </style>


    <script>
    $(function() {


        $(window).scroll(function() {

            // calculate the percentage the user has scrolled down the page
            var scrollPercent = ($(window).scrollTop() / $(document).height()) * 100;

            if (scrollPercent > 70) {
                $(".peekaboo").addClass('open');

            }

        });

    });
    </script>

</head>
<body>

    <div class="content">


    </div>

    <div class="peekaboo">
        Peekaboo!
    </div>


</body>
</html>

你可以试试类似的东西 $function{ $window.on'scroll.peekaboo'，函数{ //计算用户向下滚动页面的百分比 var scrollPercent=$window.scrollTop/$document.height*100；如果百分比>70{ //添加1秒延迟 setTimeoutfunction{ $.peekaboo.addClass'open'； }, 1000 } }; $'.peekaboo.close'.clickfunction{ $.peekaboo.removeClass'open'； //移除滚动处理程序，使模式不再显示在滚动上 $window.off'scroll.peekaboo'； } }; html，身体{ 保证金：0；填充：0； } .内容{ 显示：块；最小高度：3000px； } 躲猫猫{ 位置：固定；右：0；底部：0；显示：块；宽度：200px；高度：150像素；背景色：红色； -webkit过渡：所有0.6秒轻松； -o型过渡：所有0.6s的轻松度； -ms转换：所有0.6s的易用性；过渡期：所有0.6秒缓解；底部：-150px； } .躲猫猫公开赛{ 底部：0； } .躲猫猫，关门{ 位置：绝对位置；右：2px；顶部：5px； } 躲猫猫！关

通过将jQuery的延迟方法与animate（而不是css3动画）结合使用，可以实现延迟

使用“关闭”按钮，您可以在弹出div中添加一个元素，并为其分配一个单击事件。单击它时，可以在peekaboo div上使用jQuery的hide方法来隐藏它，如下所示

我喜欢使用ID选择器而不是类选择器，因为它们需要更少的DOM遍历

我还注意到，在我的大屏幕上，当浏览器处于全高时，滚动百分比永远不会达到70%。您可以尝试另一种方法来检测滚动位置，但我没有尝试解决这个问题

<!DOCTYPE html>
<html>
<head>

<title>Peekaboo</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style>

html, body {
    margin: 0;
    padding: 0;
}
.content {
    display: block;
    min-height: 3000px;
}

.peekaboo {
    position: fixed;
    right: 0;
    bottom: 0;
    display: block;
    width: 200px;
    height: 150px;
    background-color: red;
    bottom: -150px;
}

.open {
    bottom: 0;
}

.closeBtn {
    cursor: pointer;
}

</style>


<script>
$(function() {

    $(window).scroll(function() {

        // calculate the percentage the user has scrolled down the page
        var scrollPercent = ($(window).scrollTop() / $(document).height()) * 100;

        if (scrollPercent > 70) {

            $("#peekaboo").delay('slow').animate({ bottom: 0 });

        }

    });

    $('#close').click(function() {
        $('#peekaboo').hide();
    });
});
</script>

</head>
<body>

<div class="content">

</div>

<div id="peekaboo" class="peekaboo">
    <div id="close" class="closeBtn">Close</div>
    Peekaboo!
</div>

一旦您关闭它，然后再次滚动，它就不会显示弹出窗口不存在it@GabrielaPinto另外，请尝试-这是更好的，因为滚动处理程序被删除得更早