jQuery UI Dialog width Option
Dialog width option is used to set the width of the dialog box in pixels. By default, the value is 300.
Syntax:
$( ".selector" ).dialog({
width : 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”>
<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 1:
HTML
<!doctype html><html><head> <link href= rel="stylesheet"> <script src= </script> <script src= </script> <script> $(function () { $("#gfg").dialog({ autoOpen: false, width: 100 }); $("#geeks").click(function () { $("#gfg").dialog("open"); }); }); </script></head><body> <div id="gfg"> Jquery UI| width dialog option </div> <button id="geeks">Open Dialog</button></body></html> |
Output:
Example 2:
HTML
<!DOCTYPE html><html><head> <link href= rel="stylesheet"> <script src= </script> <script src= </script> <script> $(function () { $("#gfg").dialog({ autoOpen: false, width: 300 }); $("#geeks").click(function () { $("#gfg").dialog("open"); }); }); </script></head><body> <div id="gfg"> Jquery UI| width dialog option </div> <button id="geeks">Open Dialog</button></body></html> |
Output:
Please Login to comment...