This solution isn't really best practice for hooking up javascript events/functions when using jQuery, but it should server well to illustrate the mechanisms you need:
The function to show the dialog:
function showModalDialog() {
//Declare an overlay to fade out the primary view.
var overlay = $('<div id="overlay" style="position:fixed;overflow:hidden; height: 100%; width: 100%;background-color: rgba(0,0,0,0.5);z-index: 1;" />');
//Declare a dialog to hold the input fields.
var dialog = $('<div id="modal" style="position:absolute;top: 50%; left: 50%;-ms-transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width:350px; z-index: 2;background-color: white;" />');
//Add content to the dialog.
dialog.append('<h3>Create</h3>');
dialog.append('<label style="display: block;">Data field 1: <input type="text" id="dataField1" /></label>');
dialog.append('<label style="display: block;">Data field 2: <input type="text" id="dataField2" /></label>');
dialog.append('<label style="display: block;">Data field 3: <input type="text" id="dataField3" /></label>');
dialog.append('<input type="button" id="btnCreate" value="use data" onclick="useData();" />');
//Show the overlay and the dialog.
$('html').prepend(overlay);
$('html').prepend(dialog);
}
The function to get the values and add them to the table:
function useData() {
//Get the values.
var value1 = $('#dataField1').val();
var value2 = $('#dataField2').val();
var value3 = $('#dataField3').val();
//Append the new values to the table.
$('#data').append($('<tr />')
.append($('<td />').html(value1))
.append($('<td />').html(value2))
.append($('<td />').html(value3))
);
//Remove the overlay and dialog.
$('#overlay').remove();
$('#modal').remove();
}
JsFiddle demonstrating the code, but updated to perform the hook-up of events in $(document).ready()
: