JQuery UI, диалог не может быть центрирован - PullRequest
4 голосов
/ 26 марта 2012

Может кто-нибудь мне помочь и сказать, почему я не могу центрировать JQuery UI Dialog

POS

<script src="js/jquery-1.7.1.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.button.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.resizable.js"></script>
<script src="js/jquery.ui.dialog.min.js"></script>
<style type="text/css" title="currentStyle">
</style>
<style> 
    </style>

<script>
$(function() {
    $('#addDialog').dialog({modal:true,buttons: {
            "Delete all items": function() {
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },position: 'center'});

    $("#resizable").resizable({
        animate: true,
        maxWidth: 400,
        minWidth: 300,
        containment: ".fullscreen"
    });

});
</script>

  </head>
 <div id='addDialog' style="display: none;">
iohio
 </div>
 <body id="dt_example" style='overflow:hidden;'>


 <div class="fullscreen" style='overflow:hidden;'>

 <div style='float: left; height:90%;' id="resizable" >


 </div>

 <div id="resizable2"  style='height:90%; overflow:hidden;'>

 <div id="container">

 <div id="demo">

 </div>

</div>

</div>

</div>
</body>
</html>

Ответы [ 3 ]

1 голос
/ 26 марта 2012

Для диалогового интерфейса требуются "ядро", "виджет", "позиция" и "диалог". Вам не хватает "позиция".

1 голос
/ 26 марта 2012

РЕДАКТИРОВАТЬ:

Похоже, вы также должны добавить ссылку на позицию пользовательского интерфейса в соответствии с документацией диалога здесь: http://jqueryui.com/demos/dialog/

Кроме того, чтобы предотвратить это в будущем, создайте свою загрузку здесь: http://jqueryui.com/download, чтобы все зависимости автоматически загружались для нужных вам функций.

Переместите свой addDialog div внутри тега <body>

This ...

<div id='addDialog' style="display: none;">
    iohio
</div>
<body id="dt_example" style='overflow:hidden;'>

должно быть

<body id="dt_example" style='overflow:hidden;'>
  <div id='addDialog' style="display: none;">
     iohio
  </div>
0 голосов
/ 11 июня 2012

Вот как я решил проблему, я добавил эту функцию открытия диалогового окна:

  open: function () {
                $('.ui-dialog').css("top","0px");                                
                    }

Это теперь открывает диалоговое окно в верхней части экрана, независимо от того, где страница прокручивается иво всех браузерах.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...