SlideUp Jquery 用于模式弹出答案

【问题标题】：SlideUp Jquery for modal popupSlideUp Jquery 用于模式弹出
【发布时间】：2018-07-23 00:55:19
【问题描述】：

我创建了一个电子邮件订阅弹出模式。现在我将模态设置为淡入，但我希望模态从页面底部向上滑动到顶部。我尝试了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();
}

【问题讨论】：

标签： javascript jquery modal-dialog popup

【解决方案1】：

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>

【讨论】：

嗨，基里尔，谢谢。让我尝试实现你的代码，看看它是否有效。
谢谢 Kirill，您的代码运行良好，正是我想要完成的。非常感谢您的帮助。

【解决方案2】：

应该使用.slideDown()，但是！.. 在 CSS 中不要使用top: NN，而是使用bottom: NN。这样元素 "anchors" 到它的底部属性，.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>

【讨论】：

谢谢Roko，谢谢你的帮助。我会试试的。
嘿 Roko，你的代码工作得很好。非常感谢您的帮助。