HTML
CSS
JAVASCRIPT
BOOTTRICK
LATEST BLOG
CODE SHARE
JSON VIEWER
LATEST JOBS
Online Training
jQuery UI Dialog on button click
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 popup - Default functionality with button click</title> <link rel="stylesheet" href="//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> <p>Note: this is the example jquery ui popup model</p> <ol> <li> how to set Title in jquery ui popup model</li> <li> how to set hight and width in jquery ui popup model</li> <li> how to set position jquery ui popup model</li> <li> how to set custom css in jquery ui popup model</li> </ul> <br><br> <hr> <button id="dialogBtn">Click button to open popup</button> <br><br> <div id="dialogBox" 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() { $("#dialogBtn").click(function(){ $("#dialogBox") .dialog({ width: 330, height: "auto", autoOpen: true, dialogClass: "custom-ui-widget-header-warning", modal: true, responsive: true, position: { my: "center", at: "center", }, }).dialog("open").prev().css("background", "#54ca68").css("color", "#fff"); }); });