Jquery Confirm Yes No example in JSfiddle

Following example shows the confirmation dialog box with a yes/no buttons using Jquery.

We have a employee table with radio buttons. A user can select a radio button and click on the delete button to delete the employee record.

I have created a simple Confirm dialog with not much styling, but we can always customize the html to make it look better.

Example :

A working example can be seen in JSFiddle at : http://jsfiddle.net/sanjayingole/9Lyfy9ay/1/

Javascript : 

// openDeleteConfirmDialog opens the confirmation dialog box
function openDeleteConfirmDialog() {
   
$("#selectedEmployee").html($("td[id='"+ $("input[name='empid']:checked").val() +"']").html());
   
    // Define the Dialog and its properties.
    $("#confirmDeleteDialog").dialog({
        resizable: false,
        modal: true,
        title: "Modal",
        height: 150,
        width: 500,
        buttons: {
            "Yes": function () {
                $(this).dialog('close');
                performAction(true);
            },
                "No": function () {
                $(this).dialog('close');
                performAction(false);
            }
        }
    });
}

// Call the openDeleteConfirmDialog method on Buttons click
$('#btnDeleteEmployee').click(openDeleteConfirmDialog);

// delete record if user clicked Yes on confirmation dialog
function performAction(action) {
    if (action) {
        $("input[name='empid']:checked").parent().parent().hide();
        $("#confirmMessage").html("Successfully Deleted Employee : " + $("td[id='"+ $("input[name='empid']:checked").val() +"']").html());
    } else {
    // Do nothing
    }
}

HTML Code:

<H1>Employee Records </H1>
<div id="confirmMessage">  
</div>
<table>
     <tr>
        <th></th>
        <th>Employee Name</th>
        <th>Address</th>
        <th>Phone No.</th>
    </tr>
     <tr>
        <td><input type="radio" name ="empid" id="empid" value="empid1"></input></td>
        <td id="empid1">John Oliver</td>
        <td>123 Abbey Road, Chicago</td>
        <td>123-232-1233</td>
    </tr>
     <tr>
        <td><input type="radio" name ="empid" id="empid"  value="empid2"></input></td>
        <td id="empid2">Madonna</td>
        <td>2017 Lomard St, San Francisco</td>
        <td>874-522-3511</td>
    </tr>
     <tr>
        <td><input type="radio" name ="empid" id="empid"  value="empid3"></input></td>
        <td id="empid3">Adam Sandler</td>
        <td>787 Beverly Hills, LA</td>
        <td>434-215-5590</td>
    </tr>
    <tr>
        <td><input type="radio" name ="empid" id="empid"  value="empid4"></input></td>
        <td id="empid4">Jack Nicholson</td>
        <td>6789 Hollywood Blv, LA</td>
        <td>898-431-6574</td>
    </tr>
<table>

<input type="button" id="btnOpenDialog" value="Delete Employee Record"/>

<div id="confirmDeleteDialog" class="confirmDeleteDialog"
style="border: 1px solid #000000; display: none;">
<div class="sectionHeader" style="top: 0px;">
<span class="sectionTitle">Delete Employee Record</span>
        <span id="selectedEmployee"></span>
</div>
</div>

CSS Code :

table {
    background : #DfDfFF;
    border : 1px dotted;
    margin-left 30px;
    margin-bottom : 30px;
}
th {
    border : 1px solid;
}
td {
    border : 1px solid;
}

#btnDeleteEmployee {
  margin-left : 270px;
}
#confirmMessage {
    background-color : rgb(183, 240, 121);
    width : 455px;
}
.confirmDeleteDialog {
width : 700px;
height : 100px;
padding : 20px;
background-color : #d6d8d9;
background: #d6d8d9;
}

.ui-dialog-titlebar {display:none;}

.ui-widget-overlay {
background: black;
opacity: .8;
filter: Alpha(Opacity=30);

}