Javascript - Waiting for event before proceeding

Question

I'm trying to create ONE javascript function that can do the following:

1. onclick, a form popup in a floating div (this part is okay)
2. the script then some how wait for data to be entered into the form before returning the value in the form.

You can say I'm trying to create my own version of javascript prompt.

The problem is how to do action #2?

Any help appreciated.

Answer 1

jQuery modal dialog boxes. See examples in SimpleModal.

Answer 2

Any reason for the emphasis of ONE Javascript function?

function showModal() {
    var div = document.createElement('div');
    div.id = 'myprompt';
    div.innerHTML = '<form id="test" onsubmit="return handleModal();"><input type="text" name="first"></form>';
    document.body.appendChild(div);
}

function handleModal() {
    alert('Hello, ' + document.getElementById('test').first.value);
    return false;
}

showModal();

Check this out in action. Just type something and press enter. Styling would be done via CSS.

A big part of Javascript is events: do this when this happens. You shouldn't try to fight it.

As you can see, this gets hairy fast. You should look into the many, many, libraries and plugins that handle this very nicely. I personally recommend jQuery and Thickbox, jModal or Impromptu.