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

Posted 2023-05-08

【中文标题】如何让弹出窗口垂直向上和向下扩展

【英文标题】：How to get popup to expand vertically up and down

【发布时间】：2015-11-30 02:39:34

【问题描述】：

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

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

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

也就是说，它会说：

约翰·史密斯和今天还有 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");
);

【参考方案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 设为您更改为的值的负数。

【讨论】：

那么你希望哪些组件更小时显示？只是Click Here?

我更改了它，使其在外框被拉伸之前不会显示。开箱后使用回调函数即可。您可以将“盲”效果修改为任何 jquery 效果。

我不确定你的意思。你想从中心缩放它吗？还是你想把它拉下来，然后再拉直？

让我们continue this discussion in chat.

@Becky 请注意，我上次更新了小提琴。单击Close 时出现效果不起作用的问题。我修好了。