初めまして、以下のことを質問させてください。
jsonでモーダルウィンドウのボタンとモーダルウィンドウのhtmlを書き出しするのはできたのですが、
ボタンをクリックしてもモーダルウィンドウの中に描画したhtml(文字や画像)が出なくて困っています。
jsonでの出力ではなく、htmlにjsonの部分も全部書いた場合はモーダルウィンドウはうまく機能します。
どうすればうまくいくか試行錯誤しています。
モーダルウィンドウのjsに、例えばA会社のボタンをクリックしたら、A会社のidnameを取得するというようにjsを書き換えたらうまくいくのでは?と思い以下のことを試しています。
jsonの"idname"を
jsのvar link = self.attr(users.idname); で取得しようとしました。
うまく行きません。
jsonを読み込ませず、htmlとjsのみにした場合は、
var link = self.attr(users.idname);のところは、
var link = self.attr('href'); になります。
jsはunderscore.jsも使っています。
お忙しいところすみません、是非よろしくお願いいたします。
<jsonの部分>
json
1{"users": [ 2 3{ 4 "title":"A株式会社", 5 "cat":"website", 6 "filename":"a-company", 7 "idname":"#modal1", 8 "url":"http://a-company.co.jp/" 9}, 10{ 11 "title":"B株式会社", 12 "cat":"website", 13 "filename":"b-company", 14 "idname":"#modal2", 15 "url":"http://a-company.co.jp/" 16} 17 ] 18} 19
<jsの部分>
javascript
1(function($){ 2 3 $(document).ready(function(){ 4 $.ajax({ 5 dataType: "json", 6 url: "works.json", 7 success: function(data) { 8 // バインドするオブジェクト定義 9 var users = data.users; 10 // テンプレートを取得 11 var template = $("#external-template").text(); 12 // テンプレートを定義 13 var compiled = _.map(users, function(user) { 14 return _.template(template, user); 15 }); 16 outputResults(users); 17 outputResults2(users); 18 simpleModalWindow(users); 19 } 20 }); 21 }); 22 23(ここには、function outputResults(users); 24 function outputResults2(users); でhtmlにボタンとモーダルウィンドウのhtml出力 を記述) 25 26 function simpleModalWindow(users){ 27 28 var sp = 500; //アニメーション速度 29 var win = $(window); 30 var body = $('body'); 31 var bg = $('<div id="modal-bg"></div>'); 32 bg.css('opacity', '0'); 33 34 //モーダルウィンドウ表示クリックイベント 35 $(document).on('click', '.modal-open', function(){ 36 var py = win.scrollTop(); 37 var wh = win.height(); 38 var self = $(this); 39 var link = self.attr(users.idname); 40 var check = link.match(/^#.+/); 41 var mWin = $('<div id="modal-win"><div id="modal-win-inner"></div></div>'); 42 var mInner = mWin.find('#modal-win-inner'); 43 mInner.css('opacity', '0'); 44 body.append(mWin); 45 mWin.prepend(bg); 46 if(!check){ 47 mInner.append('<img src="' + link + '" alt="" />'); 48 var img = mWin.find('img'); 49 img.on('load', function(){ 50 view(img); 51 }); 52 } 53 else { 54 var contents = $(link); 55 mInner.append(contents); 56 contents.css({display: 'block', zIndex: '20001'}); 57 view(contents); 58 } 59 function view(a_elm){ 60 var w = a_elm.outerWidth(); 61 var h = a_elm.outerHeight(); 62 var mt = (wh - h) / 2 + py; 63 bg.animate({opacity: '.75'}, sp); 64 mWin.css('top', mt + 'px'); 65 mInner.css({width: w, height: h}).animate({opacity: '1'}, sp); 66 } 67 return false; 68 }); 69 70 //モーダルウィンドウ内要素変更クリックイベント 71 $(document).on('click', '.modal-move', function(){ 72 var py = win.scrollTop(); 73 var wh = win.height(); 74 var self = $(this); 75 var link = self.attr(users.idname); 76 var check = link.match(/^#.+/i); 77 var mWin = $('#modal-win'); 78 var mInner = mWin.find('#modal-win-inner'); 79 if(check){ 80 mInner.animate({opacity: '0'}, sp, function(){ 81 var nowContents = $(this).children(); 82 body.append(nowContents); 83 nowContents.hide(); 84 var contents = $(link); 85 mInner.append(contents); 86 contents.css({display: 'block', zIndex: '20001'}); 87 var w = contents.outerWidth(); 88 var h = contents.outerHeight(); 89 var mt = (wh - h) / 2 + py; 90 bg.animate({opacity: '.75'}, sp); 91 mWin.css('top', mt + 'px'); 92 mInner.css({width: w, height: h}).animate({opacity: '1'}, sp); 93 }); 94 } 95 return false; 96 }); 97 98 //モーダルウィンドウクローズクリックイベント 99 $(document).on('click', '#modal-bg, .modal-close', function(){ 100 var mWin = $('#modal-win'); 101 var mInner = mWin.find('#modal-win-inner'); 102 var contents = mInner.children(); 103 mInner.animate({opacity: '0'}, sp, function(){ 104 if(contents.attr("id")){ 105 body.append(contents); 106 contents.hide(); 107 } 108 mWin.remove(); 109 }); 110 bg.animate({opacity: '0'}, sp); 111 return false; 112 }); 113 114 }; 115 116})(jQuery);
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/28 09:14
2018/07/28 09:28
2018/07/28 09:52