javascript - 如何让popup垂直上下展开

Question

我有以下 fiddle 来展示我已经拥有的弹出窗口......

https://jsfiddle.net/05w8fpL5/6/

我正在寻找在页面加载时以垂直方式上下扩展的弹出窗口。 Facebook 就是一个例子。当您单击生日旁边的“更多”链接时。

即 - 它会说:

John Smith 和今天还有 5 个生日

或类似的东西。如果单击它，您将看到弹出窗口显示为一个小矩形，然后展开为整个内容并显示内容。

我该怎么做？

现在，我的弹出窗口会在页面加载时显示。

$(document).ready(function () {
    // On Load Show
    $(".light_admin,.white_overlay").fadeIn("slow");

    // Set time Out 5 second
    setTimeout(function () { $(".light_admin,.white_overlay").fadeOut("slow"); }, 5000);
});

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

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

Answer 1

我想我明白你想做什么。首先围绕内容创建一个包装器。隐藏内容和外部包装。您可以通过增加顶部和底部的填充来实现拉伸(stretch)效果，同时，设置一个负的 margin-top 等于 padding-top 你设置的。这样，您就不会在展开元素时移动它。

HTML

<div class="dashboard_welcome_help">    
<a class="admin_popup" href="javascript:void(0)">Click Here</a>

<div class="admin_help_popup light_admin">  

    <a class="close_admin_popup" href="javascript:void(0)">Close</a>
    <div class="wrapper">
      <div id="indexpopupTitleWrap">
        <div id="indexpopupTitle">Have Questions?</div>
      </div>
      <div id="contactMessageStatus"></div>
      <form id="admin_help_form" name="admin_help" action="" method="POST" autocomplete="on">
        <div id="admin_help_form_wrap">
            <input type="text" class="inputbar" name="name" placeholder="Full Name" required>
            <input type="email" class="inputbaremail" name="email" placeholder="Email" required>
            <textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
            <label for="contactButton">
                <input type="button" class="contactButton" value="Send Message" id="admin_submit">
            </label>
        </div>
      </form>
      </div>
    </div>
<div class="white_overlay"></div>

</div>

JQuery

$(document).ready(function () {

    $(".light_admin,.white_overlay").fadeIn("slow",function(){
          $(".light_admin").animate({paddingBottom:'50px',paddingTop:'50px',marginTop:'-50px'},170);
     });
});

$('.admin_popup').on('click', function () {
    $(".light_admin,.white_overlay").fadeIn("slow",function(){
        $(".light_admin").animate({paddingBottom:'50px',paddingTop:'50px',marginTop:'-50px'},170);
        });
     });

$('.close_admin_popup').on('click', function () {
    $(".light_admin,.white_overlay").fadeOut("slow",function(){
                $(".light_admin").animate({paddingBottom:'0px',paddingTop:'0px',marginTop:'0px'},170);
        });
});

Fiddle

记下 marginTop 值。如果您更改 paddingTop，则必须使 marginTop 成为更改值的负值。