javascript - 如何创建用户交互式弹出式表单

Question

我正在寻找单击链接或按钮时弹出的内容，但它必须不仅仅是弹出窗口。它必须是一个要求输入的交互式表单，当提供输入时，它会将输入返回到父窗口。我不是要代码。我只是不知道它是哪种技术。你知道我在说什么吗？

Answer 1

1，通过 2 将 jQuery 包含到您的 HTML 中<script src=..> ，有关如何通过 jQuery 创建模态叠加层的教程，请参阅本教程：

http://jquerytools.org/demos/overlay/modal-dialog.html

http://www.jacklmoore.com/notes/jquery-modal-tutorial

Answer 2

我可以建议执行以下操作。在 JS 中：

$container = $("#container");
$("<div class=\"popup\" id=\"popup-id\"><!--html code of form here--><div>").hide().appendTo($container);
....
function showPopup() {
    $("#popup-id").show().offset({
    left : yourX,
    top : yourY
});

}

在 HTML 中：

<!-- container of popup -->
<div id="container">
    ...
<div>
...
<a onclick="showPopup()">Show Pop Up</a>

在 CSS 中

div.popup {
    display: inline-block 
}

那应该行得通。

UPD。甚至更多。而不是div用$("<div class=\"popup\" id=\"popup-id\"><!--html code of form here--><div>"). 你可以使用jquery.tmpl()函数。

Answer 3

使用 jQuery，在子窗口（弹出窗口）中，您可以调用父窗口（打开器）并在其中定位一个字段，如下所示：

$("#fieldInParent", opener.window.document).val("new value");

opener.window.document 告诉 jquery ID 在打开弹出窗口的窗口中。