Question

我需要在页面加载时显示弹出消息。页面加载时我收到弹出窗口。但问题是它来到了页面的中心。如果页面较大，弹出窗口会下降。我希望弹出窗口始终是屏幕的中心。

如何修复特定位置的弹出窗口？

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script>
  $(function() {		
    $( "#dialog" ).dialog({
    	 width : 700,
    	 height : 400,
    	 modal: true   
    });   
  });
  </script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
 

</head>
<body>
<div id="dialog" style="display:none;" title=" ">
  <iframe frameborder="0" scrolling="no" width="670" height="350" src="popUp.html"></iframe>
</div>
</body>
</html>

Answer 1

要在所有情况下完美地居中绝对/固定div，没有javascript和调整大量加载CPU的事件，你可以使用css translate：

＆＃13;

    .modal {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%); /* IE 9 */
        -webkit-transform: translate(-50%, -50%); /* Safari iOS */
        transform: translate(-50%, -50%); /* Rest of browsers */
      
        background-color: black;
        width: 100px;
        height: 100px;
    }

＆＃13;

<div class="modal"></div>

＆＃13;

将iframe弹出窗口固定在屏幕中央

1 个答案: