jQuery UI Dialog hide 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 hide option is used to animate the hiding of the dialog. It contains Boolean or Number or String or Object type values. Syntax: $( ".selector" ).dialog({ hide: { effect: "explode", duration: 1000 } }); 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, hide: { effect: "explode", duration: 1000 } }); $("#geeks").click(function () { $("#gfg").dialog("open"); }); }); </script> </head> <body style="text-align: center;"> <h1 style="color:green;">GeeksforGeeks</h1> <h3>jQuery UI Dialog hide 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-hide Comment More infoAdvertise with us Next Article jQuery UI Dialog hide Option P ppatelkap Follow Improve Article Tags : Web Technologies JQuery HTML-Tags jQuery-Methods jQuery-UI +1 More Similar Reads jQuery UI Dialog height Option Dialog height option is used to set the height of the dialog box. By default, value is "auto". Syntax: $( ".selector" ).dialog({ height : 120 }); 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 1 min read jQuery UI Dialog draggable Option Dialog draggable option if set to true the dialog box will be draggable or if set to false the dialog box will not be draggable. By default, value is true. Syntax: $( ".selector" ).dialog({ draggable: true }); Approach: First, add jQuery UI scripts needed for your project. <link href = "https://c 1 min read jQuery UI Dialog show Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Dialog show Option is used to set how to animate the showing of the dialog. This option contains Boolean or Number or S 1 min read jQuery UI Dialog modal Option 'modal option' if set to true will disable the other items in the dialog box. By default, value is false. Syntax: $( ".selector" ).dialog({ modal: false }); Approach: First, add jQuery UI scripts needed for your project. <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-u 2 min read jQuery UI Dialog title Option The article explains the title option which is used to set the title in the dialog box. By default, its value is null. Syntax: $( ".selector" ).dialog({ title : "title" }); 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 Like