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

粘性模态更改它在放大/缩小时的位置，并且浏览器调整大小

1 个答案: