javascript - 粘性模态改变它在放大/缩小和浏览器调整大小时的位置

Question

我的模态有问题。当使用 jquery 单击按钮时，我已经完成了让它向下滑动的工作。现在我的问题是每当我放大、缩小或调整浏览器大小时，模态的位置都会发生变化。我希望模式坚持我想要的位置。这是我的代码:

    <script> 
$(document).ready(function(){
$("#login").click(function(){
$("#form").slideDown(400);
 });
  $("#close").click(function(){
$("#form").slideUp(400);
 });
});
</script>

<style type="text/css">
#form
{
display:none;
position:absolute !important;
top:300px !important;
left:820px !important;
margin-top:-120px !important;
margin-left:-500px !important;
z-index:101;
}
</style>

正如您在我上面的代码中看到的，我使用 top 和 left 固定了我的模态框在 CSS 中的位置。但是当我缩小/放大或调整浏览器大小时，位置会发生变化。我怎样才能让它固定在一个固定的位置？任何帮助将不胜感激。

更新:我自己修复了它。我只需要删除 css 中的一些代码。这是新的 CSS 代码:

<style type="text/css"> 
#form
{
display:none;
position:absolute !important;
z-index:101;
}
</style>

希望对遇到同样问题的大家有所帮助。

Answer 1

使用position: fixed代替absolute