jQuery UI Dialog maxWidth Option Last Updated : 22 Mar, 2021 Comments Improve Suggest changes Like Article Like Report jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Dialog maxWidth option is used to set the maximum width to which the dialog can be resized in pixels. Syntax: $( ".selector" ).dialog({ maxWidth: 600 }); CDN Link: First, add jQuery UI scripts needed for your project. <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> Example: HTML <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link href= "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function () { $("#gfg").dialog({ autoOpen: false, maxWidth: 400 }); $("#geeks").click(function () { $("#gfg").dialog("open"); }); }); </script> </head> <body style="text-align: center;"> <h1 style="color:green;">GeeksforGeeks</h1> <h3>jQuery UI Dialog maxWidth Option</h3> <button id="geeks">Open Dialog</button> <div id="gfg" title="GeeksforGeeks"> Welcome to GeeksforGeeks </div> </body> </html> Output: Reference: https://api.jqueryui.com/dialog/#option-maxWidth Comment More infoAdvertise with us Next Article jQuery UI Dialog maxWidth Option P ppatelkap Follow Improve Article Tags : Web Technologies JQuery HTML-Tags jQuery-Methods jQuery-UI +1 More Similar Reads jQuery UI Dialog minWidth Option Dialog minWidth option is used to set the minimum width that can be set to the dialog box in pixels. By default, the value is 150. Syntax: $( ".selector" ).dialog({ minWidth : 150 }); Approach: First, add jQuery UI scripts needed for your project. <link href="https://code.jquery.com/ui/1.10.4/the 1 min read jQuery UI Dialog maxHeight Option Dialog maxHeight option is used to set the maximum height that can be set to the dialog box. By default, value is false. Syntax: $( ".selector" ).dialog({ maxHeight : 10 }); Approach: First, add jQuery UI scripts needed for your project. <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-l 2 min read jQuery UI dialog option() Method This action gets an object containing key/value pairs representing the current dialog options hash. This method does not accept any argument Syntax: var a = $( ".selector" ).dialog("option"); Approach: First, add jQuery UI scripts needed for your project. <link href = "https://code.jquery.com/ui/ 1 min read jQuery UI Dialog minHeight Option Dialog minHeight option is used to set the minimum height that can be set to the dialog box. By default, value is 150. Syntax: $( ".selector" ).dialog({ minHeight : 150 }); Approach: First, add jQuery UI scripts needed for your project. <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-li 1 min read jQuery UI dialog open() Method open() Method is used to open the dialog. This method does not accept any argument Syntax: $( ".selector" ).dialog("open"); Approach: First, add jQuery UI scripts needed for your project. <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> 1 min read Like