親ページからiframe内の画像をモーダルウインドウ化

jQuery

親ページからiframe内の画像をクリックした時に、モーダルウィンドウのように親ページ含め画面全体に表示したかったのでjQueryを使用してコードを書いてみました。

何かの参考になれば幸いです。

スポンサーリンク

モーダルウィンドウ化

ざっくり説明していきます、コードは汚いです。

parent.html

モーダルウィンドウ用のスクリプトファイルは親ページのみで読み込みをするようにしています。

child.html

stylesheet.css

モーダルウィンドウ用の背景と画像のCSSです。

画像の中央表示がローカル環境ではうまくいかなかったので普段とは違うコードになっています。

参考 position: absolute;を中央寄せする方法|コトダマウェブ

script.js

.contents().find()を使ってiframe内の操作をします。
on(“load”,function(){});を使うことでiframe内の全てがロードし終わったあとに動作するよう設定しています。
ドメインが異なる場合は動作しない可能性が高いです。

動作

以下のように、iframe内の画像をクリックすると画面全体にモーダルウィンドウが展開されるようになりました。

GoogleChromeやその他ローカル環境だとうまく動作しないこともありますが、サーバーにアップロードすることで正常に動作することを確認しました。

タイトルとURLをコピーしました