Jqueryで下記要望を実現する際に設定イメージがつかず、どなたかご教授頂ければと存じます。
1:モーダルで表示された画像一覧から、選択した画像のURLとaltを取得し、モーダルをクローズ
2:テキストエリアの中に、imgタグを追加しsrcとaltは1で取得した内容を表示
attr('src',img_url)などで画像のURLを取得することは理解できているのですが、
「選択した」画像のURLを取得することができませんでした。。
恐れ入りますが、どなたかご教授頂ければと存じます
html
<!-- モーダルのコンテンツ--> <div id="modal-main" > <img src="/system/pictures/avatars/000/000/036/medium/IMG_1089.JPG?1506226823" alt="Img 1089"><br> <img src="/system/pictures/avatars/000/000/037/medium/IMG_1090.JPG?1506226825" alt="Img 1090"><br> <img src="/system/pictures/avatars/000/000/038/medium/IMG_1097.JPG?1506226827" alt="Img 1097"><br> </div> <!-- モーダルリンク--> <div id="contents"> <p> <a id="modal-open">【クリックで画像一覧のモーダルウィンドウを開きます。】</a> </p> </div> <textarea"> ここに要望2を反映したい </textarea>
モーダルのJS(参考)
$(function(){ //テキストリンクをクリックしたら $("#modal-open").click(function(){ //body内の最後に<div id="modal-bg"></div>を挿入 $("body").append('<div id="modal-bg"></div>'); //画面中央を計算する関数を実行 modalResize(); //モーダルウィンドウを表示 $("#modal-bg,#modal-main").fadeIn("slow"); //画面のどこかをクリックしたらモーダルを閉じる $("#modal-bg,#modal-main").click(function(){ $("#modal-main,#modal-bg").fadeOut("slow",function(){ //挿入した<div id="modal-bg"></div>を削除 $('#modal-bg').remove() ; }); }); //画面の左上からmodal-mainの横幅・高さを引き、その値を2で割ると画面中央の位置が計算 $(window).resize(modalResize); function modalResize(){ var w = $(window).width(); var h = $(window).height(); var cw = $("#modal-main").outerWidth(); var ch = $("#modal-main").outerHeight(); //取得した値をcssに追加する $("#modal-main").css({ "left": ((w - cw)/2) + "px", "top": ((h - ch)/2) + "px" }); } }); });
モーダルJSの参照元
※モーダルは稼働確認済み 画像取得のJSは具体的なサイト参照はしておりません。
回答1件
あなたの回答
tips
プレビュー