2015-11-18 3 views
0

Мне нужно отобразить всплывающее сообщение при загрузке страницы. Я получаю всплывающее окно, когда страница загружается. Но проблема в том, что он попадает в центр страницы. если страница больше, всплывающее окно отключается. Я хочу, чтобы всплывающее окно всегда было в центре экрана.Исправить всплывающее окно iframe в центре экрана

Как исправить всплывающее окно в определенном месте?

<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() { \t \t 
 
    $("#dialog").dialog({ 
 
    \t width : 700, 
 
    \t height : 400, 
 
    \t 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>

+0

[Это может помочь вам] (http://stackoverflow.com/questions/8764399/how-to- position-the-div-popup-dialog-to-the-center-of-browser-screen) – pedram

+0

Лучше с переводом, потому что вам не нужно знать размер окна. См. Мой ответ. –

ответ

0

Для центрирования абсолютные/фиксированные DIV прекрасно во всех ситуациях, без яваскрипт и изменять размеры событий, который загружает CPU много, вы можете использовать CSS translate:

.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; 
 
    }
<div class="modal"></div>

Смежные вопросы