SlideUp jQuery用于模态弹出窗口

Question

我已经创建了一个电子邮件订阅弹出窗口。现在，我将弹出窗口设置为淡入效果，但是我想让弹出窗口从页面底部向上滑动。我尝试使用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();
}

- skyeyl

Answer 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 Simonov

---

嘿，Kirill，谢谢。让我试着实现你的代码，看看它是否有效。 - skyeyl

谢谢Kirill，你的代码非常好用，正是我想要实现的。所以我很感激你的帮助。 - skyeyl

Answer 2

应该使用 .slideDown()，但是！.. 在 CSS 中使用 bottom: NN 而不是使用 top: 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>

- Roko C. Buljan

---

谢谢你，Roko。感谢你的帮助。我会尝试一下。 - skyeyl

嗨Roko，你的代码非常棒。非常感谢你的帮助。 - skyeyl