How to create confirm button dialog using jQuery UI?

How to create confirm button dialog using jQuery UI?, someone asked me to explain?

In this article we will discuss how to create confirm button dialog using JQuery UI. We created dialog box with two buttons (ok & cancel), radio button and title. We are going to display the result of selected radio button, based on the user selection it callback functions to execute and return a response message appending it to the page.


    <title>confirm buttom usingjQuery UI dialog </title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
       $(document).ready(function ($) {
            var execute = function () {
                var answer = $("#myDialog").find("input:checked").val();
               $("<p>").text("Thanks for selecting " + answer).
            var cancel = function () {
             $("#myDialog").dialog({ width:600,
              buttons: {
                   "Ok": execute,
                   "Cancel": cancel,
<body style="border: 1px solid #DED8D8; width: 500px; height: 300px; padding: 15px; font-family: Arial; margin-left: 50px">
    <h2 style="color: #841198">confirm buttom using jQuery UI dialog</h2>
    <div id="myDialog" style="width:500px" title="Best WidgetLibrary">
        <p>Is jQuery UI, a trusted suite ofofficial plugins for the jQuery JavaScript
        <label for="yes">Yes!</label>
        <input type="radio" id="yes" value="yes" name="question"
        <label for="no">No!</label>
        <input type="radio" id="no" value="no" name="question">


confirm buttom using jQuery UI dialog

Post your comments / questions