jQuery confirm dialog box example

jQuery confirm dialog box example

Hello everyone, I am going to share the custom confirm dialog box using jQuery dialog as given below in detail.

The jQuery dialog code sample as given below

//Begin: Open Add dialog for Add Address scripts
 $("#editTimer").dialog({
    modal: true,
    title: "Edit Timer",
    width: 620,
    height: 420,
    resizable: false,
    open: function (event, ui) {
        $('body').addClass('stop-scrolling');
    },
    close: function (event, ui) {
        $('body').removeClass('stop-scrolling');
    }
 });
//End

The HTML code sample as given below

<div class="row clearfix addressChecker" id="editTimer">
    <div class="col col_4">
        Address1 : <input type="text" id="Address1" name="Address1" />
    </div>
    <div class="col col_5">
        Address2 : <input type="text" id="Address2" name="Address2" />
    </div>
    <div class="col col_3">
        <div class="actions">
            <button type="submit" class="btn yellow center" onclick="addBillAddress()">
                Add
            </button>
        </div>
    </div>
</div>

The output: look-like below image













Other one examples for custom alert and confirmation dialog, you can see the below code. 

//#region UNDERLYING METHODS ARE USED TO SHOW THE CUSTOM ALERT AND CONFIRMATION DIALOGS

function showAlertDialog(title, content) {
    $('#divAlertDialog').dialog({
        modal: true,
        resizable: false,
        width: 600,
        title: title,
        open: function (event, ui) {
            $('#divAlertDialog p').html(content);
        },
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        }
    });
}

function showConfirmationDialog(title, content, successCallBack) {
    $('#divAlertDialog').dialog({
        modal: true,
        resizable: false,
        width: 600,
        title: title,
        open: function (event, ui) {
            $('#divAlertDialog p').html(content);
        },
        buttons: {
            "OK": successCallBack,
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
}

//#endregion

 Thank you!



ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^