Creating modal dialog with jquery

Issue

When someone clicks my label, i want to open a small “Alert” like element, and i want to be able to use the modal’s buttons functionality.

Is there a jquery library / extension that can easily do something like this?

$(document).on('click', '#MyLabel', function() { 

     openModal();

});

Solution

This a fundamentally simple task in jQuery UI. See jsfiddle

$("#myDialog").dialog({
    autoOpen  : false,
    modal     : true,
    title     : "A Dialog Box",
    buttons   : {
              'OK' : function() {
                  var textValue = $('#myTextBox').val();
                  alert('The value of the text box is ' + textValue);
                  //Now you have the value of the textbox, you can do something with it, maybe an AJAX call to your server!
              },
              'Close' : function() {
                  alert('The Close button was clicked');
                  $(this).dialog('close');
              }
                }
});

Answered By – Caleb Adams

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0