Javascript - 在继续之前等待事件

时间:2021-11-08 00:00:33

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

我正在尝试创建一个可以执行以下操作的javascript函数:

  1. onclick, a form popup in a floating div (this part is okay)
  2. onclick,浮动div中的表单弹出窗口(这部分没问题)

  3. the script then some how wait for data to be entered into the form before returning the value in the form.
  4. 然后在脚本中有一些如何在返回表单中的值之前等待数据输入到表单中。

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

你可以说我正在尝试创建自己的javascript提示版本。

The problem is how to do action #2?

问题是如何采取行动#2?

Any help appreciated.

任何帮助赞赏。

2 个解决方案

#1


Any reason for the emphasis of ONE Javascript function?

是否有任何理由强调一个Javascript函数?

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.

检查这个实际操作。只需输入内容并按Enter即可。样式将通过CSS完成。

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

Javascript的很大一部分是事件:当发生这种情况时执行此操作。你不应该试图打击它。

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.

正如你所看到的,这会变得很快。您应该查看许多很多很好地处理这个问题的库和插件。我个人推荐jQuery和Thickbox,jModal或Impromptu。

#2


jQuery modal dialog boxes. See examples in SimpleModal.

jQuery模式对话框。请参阅SimpleModal中的示例。

#1


Any reason for the emphasis of ONE Javascript function?

是否有任何理由强调一个Javascript函数?

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.

检查这个实际操作。只需输入内容并按Enter即可。样式将通过CSS完成。

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

Javascript的很大一部分是事件:当发生这种情况时执行此操作。你不应该试图打击它。

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.

正如你所看到的,这会变得很快。您应该查看许多很多很好地处理这个问题的库和插件。我个人推荐jQuery和Thickbox,jModal或Impromptu。

#2


jQuery modal dialog boxes. See examples in SimpleModal.

jQuery模式对话框。请参阅SimpleModal中的示例。