jQueryUI Dialog

by bryiantan

HTML

<div id="myDialog">
    This is the content of my modal dialog box
    <input type="text" id="myTextBox" />
</div>

<button id="clickMe">Click Me</button>

JavaScript

//Set up the dialog box
$("#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');
              }
                }
});

//Open the dialog box when the button is clicked.
$('#clickMe').on('Click', function () {
    $("#myDialog").dialog("open");
});