python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions