Question

我点击了一个按钮（见下图并注意滚动条的位置），可以使用Javascript弹出div。

见图片：https://docs.google.com/file/d/0B1O3Ee_1Z5cRTko0anExazBBQkU/preview

当我点击按钮时，会弹出一个页面顶部的弹出窗口。

见图片：https://docs.google.com/file/d/0B1O3Ee_1Z5cRWjFPS0xEV0tTeFk/preview

当我点击按钮时，我希望弹出窗口显示在页面滚动的确切位置。

这是我的代码。任何帮助将非常感谢！谢谢！

JS：

$(document).ready(function(){
//open popup
$("#pop").click(function(){
  $("#overlay_form").fadeIn(1000);
  positionPopup();
});

//close popup
$("#close").click(function(){
    $("#overlay_form").fadeOut(500);
});
});

//position the popup at the center of the page
function positionPopup(){
  if(!$("#overlay_form").is(':visible')){
    return;
  } 
  $("#overlay_form").css({
      left: ($(window).width() - $('#overlay_form').width()) / 2,
      top: ($(window).width() - $('#overlay_form').width()) / 7,
      position:'absolute'
  });
}

//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);

HTML：

              <a href="#" id="pop" ><li style="float:right; margin-left:5px; list-style-type:none; line-height:0px; padding-top:20px;"><i class="fa fa-share-square fa-lg"></i></li></a>
              <br />
<form id="overlay_form" style="display:none">
        <a href="#" id="close" >Close</a>

    <h2> Hello, World.</h2>
    Share buttons here :-)
</form>

Answer 1

您是否有理由使用JS代替CSS定位弹出窗口？

您只需将模态设置为：

即可

#overlay_form {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -00px;  /* 1/2 the height of the modal */
  margin-left: -00px; /* 1/2 the width of the modal */
}

这种方法并不需要为每次调整大小调用JS代码。您仍然可以使用当前的方法隐藏/显示模态。

P.S。记得给你的模态一个宽度/高度值，以便上述工作方法。

编辑：尝试将表单放在包装器中，并使该包装器成为弹出元素，而不是表单。像这样：

<强> HTML

<div class="pop-up">
    <form id="overlay_form">
        <a href="#" id="close" >Close</a>
        <h2> Hello, World.</h2>
        Share buttons here :-)
    </form>
</div>

<强> CSS

.pop-up {
  position: fixed;
  width: 300px;   /* set this to whatever you want */
  height: 150px;  /* set this to whatever you want */
  top: 50%;
  left: 50%;
  margin-top: -75px;  /* 1/2 the height of the modal (150 / 2) */
  margin-left: -150px; /* 1/2 the width of the modal (300 / 2) */
}

JSFiddle

如何阻止Javascript弹出窗口移动到页面顶部

1 个答案: