[英]SlideUp Jquery for modal popup
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.我尝试了slideUp()
而不是fadeIn()
但它不起作用。 I feel like I am missing something.我觉得我错过了一些东西。 Do I need to create another function for the slideUp()
?我需要为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();
}
jQuery .slideUp()
hides the matched elements with a sliding motion . jQuery .slideUp()
以滑动动作隐藏匹配的元素。 If you want to slide your popup up, you could use .animate()如果你想滑动你的弹出窗口,你可以使用.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()
should be used, but!.. instead of using top: NN
in CSS use the bottom: NN
. .slideDown()
应该被使用,但是!.. 而不是在 CSS 中使用top: NN
使用bottom: NN
。 This way the element "anchors" to it's bottom property, and the .slideDown()
will perform from bottom to top!这样元素“锚定”到它的底部属性,并且.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.