Question

我有以下小提琴来展示我已经弹出的东西......

我正在寻找我的弹出窗口，在页面加载时上下垂直扩展。一个例子是Facebook。当您点击“更多＆＃39;生日旁边的链接。

是的，它会说：

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

我想我得到了你想做的事。首先围绕内容创建一个包装器。隐藏内容和外部包装器。您可以通过增加顶部和底部的填充来实现拉伸效果，同时设置负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为您更改为的值的负数。

如何让弹出窗口垂直向上和向下扩展

1 个答案: