All geek questions in one place

JQuery ui, dialogue cannot be centered

can someone help me and tell me why i cant center 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>
+4
source share
3 answers

EDIT:

It looks like you should also add a link to the user interface position in the dialog documentation: http://jqueryui.com/demos/dialog/

Also, to prevent this from happening in the future, create your download here: http://jqueryui.com/download so that all dependencies are automatically loaded for the functions you want.

Move your addDialog div inside the <body>

It...

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

it should be

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

The Core, Widget, Position, and Dialog dialog boxes are required. You are missing a "position".

+1
source

This is how I solved the problem, I added this open dialog function:

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

Now a dialog box opens at the top of the screen, regardless of where the page scrolls in all browsers.

0
source

Source: https://habr.com/ru/post/1403509/

More articles:


All Articles