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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.