HTML
CSS
JAVASCRIPT
BOOTTRICK
LATEST BLOG
CODE SHARE
JSON VIEWER
LATEST JOBS
Online Training
jQuery UI Dialog buttons
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 of how to use button jquery ui popup model</p> <ol> <li> how to set button okay and Cancel 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", }, buttons: { Cancel: function () { $(this).dialog("close"); }, Ok: function () { window.location.href = "https://agyanadda.com"; // add dynamic url }, }, }).dialog("open").prev().css("background", "#54ca68").css("color", "#fff"); }); });