Q&A
後出しの補足となり申し訳ないのですが、子ウィンドウ内で別ページへの遷移などを行う必要がありまして、可能であればモーダルを使わない方向だと嬉しいです…
もし無理そうであれば、モーダル内で該当ページに飛ばすように実装したいと思います。
###前提・実現したいこと
現在製作中のWEBアプリケーションで、以下の機能を実装したいです。
- 親ウィンドウから、子ウィンドウを開く。
- 子ウィンドウで各種inputの情報を入力する。
- 子ウィンドウでsubmitした時に、親ウィンドウで子ウィンドウのinputの値を受け取る。
- 子ウィンドウを閉じる。
これら一連の動作ですが、jQueryなどで実現可能でしょうか？
回答2件
0
ベストアンサー
どうもこんにちは。
ここから回答
jQueryなどで実現可能でしょうか？
できます。
HTML, CSS, jQueryを使い、このように書くことができます。
親ウィンドウ
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>親ウィンドウ</title> 6</head> 7<body> 8<form name="parent_form"> 9 <label>ここに子ウィンドウから受け取った値が代入されます。 10 <textarea name="parent_textarea" class="parent_textarea"></textarea> 11 </label> 12</form> 13 14<a target="child_window" onClick="open_window()" style="color: deepskyblue"> 15 子ウィンドウを開く 16</a> 17 18<script type="text/javascript" src="jquery.js"></script> 19<script type="text/javascript"> 20 function open_window(url) { 21 window.open("children.html", "child_window", "width=400, height=300, menubar=no, toolbar=no, scrollbars=yes"); 22 } 23</script> 24</body> 25</html>
子ウィンドウは次のようになります。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>子供ウィンドウ</title> 6</head> 7<body> 8<form name="form1" id="form1"> 9 <input id="input_1" name="input_1" type="text" value=""> 10 <button onclick="message_sender(document.form1.input_1.value)">送信</button> 11</form> 12<script type="text/javascript" src="jquery.js"></script> 13<script type="text/javascript"> 14 var message = ""; 15 function message_sender(message) { 16 window.opener.$(".parent_textarea").val(message); 17 } 18</script> 19</body> 20</html>
走り書きですので、動かないところや、タイプミスなどがあると思いますので、わからないところがありましたらコメントなどをよろしくおねがいします。
以上、少し乱暴ですが、回答を終わります。
投稿2016/11/20 15:13
編集2016/11/20 15:15
退会済みユーザー
総合スコア0
0
別ウィンドウを開いてsubmitする方法もありますが、ウィンドウ内にモーダルウィンドウを作ってそこで入力するほうが躓きにくいと思います。
【初心者でも分かる！モーダルウィンドウの作り方】
https://syncer.jp/jquery-modal-window
【画面中央に表示するモーダルウィンドウを実装したい ｜ Tips Note by TAM】
http://www.tam-tam.co.jp/tipsnote/html_css/post8031.html
【【jQuery】超簡単に実装できるモーダル・ポップアップ［Remodal］の使い方 - ONZE】
http://on-ze.com/archives/4500
「モーダルウィンドウ jquery」などで検索するともっと色々出てくると思います。
投稿2016/11/20 15:02
総合スコア69398
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/20 15:28