HTML
CSS
JAVASCRIPT
BOOTTRICK
LATEST BLOG
CODE SHARE
JSON VIEWER
LATEST JOBS
Online Training
Full Width/Height Jquery ui Modal
User
HTML
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Dialog - Default functionality</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> </head> <body> Note: Dialog: Auto height does not respect the maxHeight option<br><br> <button id="openBox">Open Popup</button> <div id="dialog" title="Basic dialog" style="display:none"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div> </body> </html>
CSS
JavaScript
$( function() { $("#openBox").on("click",function(){ $("#dialog").dialog({ autoOpen: false, width:1200, maxHeight:710, height:710, autoOpen: true, dialogClass: "custom-ui-widget-header-warning", modal: true, responsive: true, position: { my: "center", at: "center", }, }); }) } );