I have created an email subscription popup modal. Right now I have the modal set to fade in but instead of that I want the modal to slide up from bottom of the page to the top. I tried slideUp() instead of fadeIn() but it does not work. I feel like I am missing something. Do I need to create another function for the slideUp()? It is a popup modal so it is ready when the window scrolls instead of on a click event. Any help is appreciated. Thank you. My code is below.

$(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();
}

I have created an email subscription popup modal. Right now I have the modal set to fade in but instead of that I want the modal to slide up from bottom of the page to the top. I tried slideUp() instead of fadeIn() but it does not work. I feel like I am missing something. Do I need to create another function for the slideUp()? It is a popup modal so it is ready when the window scrolls instead of on a click event. Any help is appreciated. Thank you. My code is below.

$(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

2 Answers 2

jQuery .slideUp() hides the matched elements with a sliding motion. If you want to slide your popup up, you could use .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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup"><div>

.slideDown() should be used, but!.. instead of using top: NN in CSS use the bottom: NN. This way the element "anchors" to it's bottom property, and the .slideDown() will perform from bottom to top!

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>