javascript - ユーザーインタラクティブなポップアップの種類のフォームを作成する方法

Question

リンクまたはボタンをクリックするとポップアップとして表示されるものを探していますが、それは単なるポップアップ以上のものでなければなりません。入力を要求する対話型フォームである必要があり、入力が提供されると、親ウィンドウに入力が返されます。私はコードを求めていません。どのような技術かはわかりません。私が何について話しているか知っていますか？

Answer 1

1, jQuery を介して HTML にインクルードします<script src=..> 2, 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 
}

それはうまくいくはずです。

アップデート。そしてさらに。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 は、ID がポップアップを開いたウィンドウにあることを jquery に伝えます。