質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1849閲覧

子画面のModalを閉じたい

takao99

総合スコア26

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/12/21 08:08

度々失礼します。
下記のソースで子画面の閉じるボタンを押したときにshowModalを閉じたいのですが、
やり方がわからず困っております。

contentWindow.documentで子画面の要素を取れるみたいなのですがうまくいきませんでした。
どのように実装すれば子画面を閉じれますでしょうか?
よろしくお願い致します。

--parent.html-- <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="oya"> <p>親</p> <div><button id="call_child">子呼び出し</button></div> <input type="text" placeholder="入力内容がiframe内に反映されます。" /> <button id="exe1">実行</button> <div id="oya-result">結果がここに反映されます。</div> </div> <script type='text/javascript' src='//code.jquery.com/jquery-2.2.4.min.js'></script> <script type="text/javascript"> $(function() { $(document).on('click', '#call_child', function() { const dialog = document.body.appendChild(document.createElement('dialog')); dialog.innerHTML = '<iframe id="inner_elem" src="child.html" style="border: 0; width:400px; height:200px;"></iframe>'; dialog.showModal(); }); $(document).on('click', '#exe1', function() { $('#child-frame').contents().find('#ko-result').text($('#oya input').val()); }); }); </script> </body> </html> --child.html-- <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body id="children"> <p>iframe内</p> <div id="ko"> <p>子</p> <div><button id="btn_close">閉じる</button></div> <input type="text" id="" placeholder="入力内容が親ページに反映されます。" /> <button id="exe2">実行</button> <div id="ko-result">結果がここに反映されます。</div> </div> <script type='text/javascript' src='//code.jquery.com/jquery-2.2.4.min.js'></script> <script type="text/javascript"> $(function() { $(document).on('click', '#exe2', function() { $('#oya-result' ,parent.document).text($('#ko input').val()); }); }); </script> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

$('#inner_elem').on('load', function()
onイベントを使わないと中身が出来ていないので取得できないみたいですね。
とりあえずこれで閉じることが出来ました。

$(document).on('click', '#call_child', function() { const dialog = document.body.appendChild(document.createElement('dialog')); dialog.innerHTML = '<iframe id="inner_elem" src="iframe_test6-2.html" style="border: 0; width:400px; height:200px;"></iframe>'; dialog.showModal(); $('#inner_elem').on('load', function() { const doc = document.getElementById('inner_elem').contentWindow.document; const btn = doc.getElementById('btn_close'); btn.addEventListener('click', function() { dialog.close(); }); }); });

投稿2020/12/25 07:36

takao99

総合スコア26

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

毎回dialogをappendしているなら閉じる作業はremoveしないと
大量にdialogが溜まりそうですね
通常dialogはデフォルト非表示ですし、1個用意しておけばよいです
表示・非表示はopen属性を付け外しします(プロパティではないので注意)

投稿2020/12/23 00:27

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問