Question

有人可以帮助我并告诉我为什么我不能集中JQuery UI对话框

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>

Answer 1

编辑：

看起来您还应该根据对话框文档添加对UI位置的引用：http://jqueryui.com/demos/dialog/

另外，为了防止将来出现这种情况，请在此处构建下载：http://jqueryui.com/download，以便自动下载所有依赖项以获取所需的功能。

将您的addDialog div移到<body>代码

中

此...

<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>

Answer 2

Dialog UI需要“核心”，小部件“，”位置“和”对话框“。您缺少”位置“。

Answer 3

这是我解决问题的方法，我添加了对话框的这个开放功能：

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

现在，无论页面滚动到何处以及在所有浏览器中，都会在屏幕顶部打开对话框。

JQuery ui，对话框无法居中

3 个答案: