Вертикальное всплывающее окно с javascript или jquery

Question

Я пытаюсь найти способ включить всплывающее окно, расширяющееся так же, как всплывающее окно «День рождения Facebook». Если вы заходите на свою страницу Facebook и нажимаете ссылку «другие» рядом с тем, где она показывает, сколько у ваших друзей дня рождения сегодня, вы заметите, что всплывающее окно появляется очень маленьким, а затем растет вертикально.

Как я могу это сделать?

Я создал скрипку, чтобы показать, что у меня есть.

https://jsfiddle.net/05w8fpL5/

Я добавил ..

.fadeIn("slow"); 

и

.fadeOut("slow"); 

До сих пор, который мне нравится, но я хотел бы некоторые так сказать на сколько времени потребовалось, чтобы FadeIn и Out.

Кто-нибудь знает, как я мог это сделать?

Answer 1

Вы можете достичь этого, используя события .slideUp() и .slideDown в JQuery. Это обеспечит вертикальную расширяющуюся анимацию, которую вы ищете. Так измените .fadeIn и fadeOut функции, в важное замечание о том, что функции слайд не работают с min-height, вам нужно будет удалить, что CSS от .admin_help_popup для этого работы:

$('.admin_popup').on('click',function(){ 
    $(".light_admin,.white_overlay").slideDown("slow"); 
}); 

$('.close_admin_popup').on('click',function(){ 
    $(".light_admin,.white_overlay").slideUp("slow"); 
}); 

Если это абсолютно необходимо, у вас есть что min-height свойство, вы можете установить min-height обратно к его значению по умолчанию после .slideDown. Вы можете попытаться сделать его более плавным, используя .animate(). Убедитесь в том, чтобы установить mine-height в 0px на слайде вверх: "что некоторые говорят, что так на сколько времени потребовалось, чтобы FadeIn и Out"

$('.admin_popup').on('click',function(){ 
    $(".light_admin,.white_overlay").slideDown("slow", function(){ 
     $(".admin_help_popup").animate({"min-height": "380px"}, "fast"); 
    }); 
}); 

$('.close_admin_popup').on('click',function(){ 
    $(".admin_help_popup").css("min-height", "0px"); 
    $(".light_admin,.white_overlay").slideUp("slow"); 
}); 

Basic SlideUp/Down Fiddle Example without min-height

Fiddle example with min-height