繁体   English   中英

用于模态弹出窗口的 SlideUp Jquery

[英]SlideUp Jquery for modal popup

我创建了一个电子邮件订阅弹出模式。 现在我将模式设置为淡入,但我希望模式从页面底部向上滑动到顶部。 我尝试了slideUp()而不是fadeIn()但它不起作用。 我觉得我错过了一些东西。 我需要为slideUp()创建另一个函数吗? 它是一个弹出模式,因此当窗口滚动而不是点击事件时它就准备好了。 任何帮助表示赞赏。 谢谢你。 我的代码如下。

$(document).scroll(function() {
    if (!$("#mc_embed_signup").data("userClosed")) {
        $(".popup-close").click(function(e) {
            closeSPopup(e);
        });

        var a = $(this).scrollTop();
        if (a > 400) {
            $("#mc_embed_signup").slideUp(600);
        }
    }
});

function closeSPopup(e) {
    e.preventDefault();
    $("#mc_embed_signup").data("userClosed", true);
    $("#mc_embed_signup").hide();
}

jQuery .slideUp()以滑动动作隐藏匹配的元素 如果你想滑动你的弹出窗口,你可以使用.animate()

 $("#popup").show().animate({top: (window.innerHeight / 2 - 50) + "px"}, 1000);
 #popup { display: none; width: 200px; height: 100px; position: fixed; top: 100%; left: calc(50% - 100px); background-color:cyan; }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="popup"><div>

.slideDown()应该被使用,但是!.. 而不是在 CSS 中使用top: NN使用bottom: NN 这样元素“锚定”到它的底部属性,并且.slideDown()将从底部到顶部执行!

 var $popup = $("#popup"); $popup.slideDown();
 #popup { position: absolute; transform: translate(-50%, 0); bottom: 24px; /* don't use top. Use bottom */ left:50%; width: 300px; height: 160px; background:red; display: none; }
 <div id="popup">Popup ou yeah</div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM