\r\n \r\n \r\n \r\n\r\n\r\n\r\n
\r\n
ここにモーダルで表示させたいものをいれます。
\r\n
\r\n \r\n
\r\n

今日の天気

\r\n

\r\n 現在時刻:\r\n \r\n 場所:\r\n \r\n 現在の気温:\r\n \r\n \r\n

\r\n
\r\n\r\n
\r\n
  • \r\n
  • \r\n
    \r\n \r\n

    \r\n\r\n \r\n\r\n\r\n\r\n\r\n```\r\n```JS\r\n$(function(){\r\n $('.slider').bxSlider({\r\n auto: true,\r\n slideWidth: 300,\r\n speed: 900,\r\n mode: 'fade',\r\n nextText: true\r\n });\r\n});\r\n \r\n\r\n\r\n$(function() {\r\n$.ajax({\r\n url: \r\n cache: false,\r\n success:function (weatherdata){\r\n // img insert\r\n var img = document.createElement('img');\r\n img.src = \"http://openweathermap.org/img/w/\"+weatherdata.weather[0].icon+\".png\";\r\n img.alt = weatherdata.weather[0].main;\r\n document.getElementById('icon').appendChild(img);\r\n // =摂氏+=K\r\n document.getElementById('temp').innerHTML = Math.floor(weatherdata.main.temp - 273.15);\r\n \r\n // 位置\r\n document.getElementById('here').innerHTML = weatherdata.name;\r\n \r\n }\r\n });\r\n});\r\nsetInterval(function(){\r\n var date = new Date();\r\n var time ;\r\n time = date.getFullYear()+'.';\r\n time += (date.getMonth()+1)+'.';\r\n time += (date.getDate())+'.';\r\n time += date.getHours()+'.';\r\n time += date.getMinutes()+'.';\r\n time += date.getSeconds(); \r\n document.getElementById('time').innerHTML = time;\r\n },1000);\r\n\r\n\r\nfunction initMap() {\r\n var data = [\r\n { lat: 36.204824, lng: 138.252924, title: \"日本\" ,content: '
    \"

    日本

    '},\r\n // \"\"},\r\n { lat: 51.813707, lng: 0, title: \"イギリス\" ,content:'
    \"

    イギリス

    '},\r\n ];\r\n\r\n var infoWindow=[];\r\n var marker=[];\r\n var map = new google.maps.Map(document.getElementById('map'), { // #sampleに地図を埋め込む\r\n center: data[0],\r\n zoom: 2.5 // 地図のズームを指定\r\n });\r\n for (var i = 0; i < data.length; i++) {\r\n markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']};\r\n marker[i] = new google.maps.Marker({\r\n position: markerLatLng,\r\n map: map,\r\n animation: google.maps.Animation.BOUNCE\r\n });\r\n infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加\r\n content: data[i]['content']\r\n });\r\n markerEvent(i); \r\n }\r\n\r\n function markerEvent(i) {\r\n marker[i].addListener('click', function() { // マーカーをクリックしたとき\r\n infoWindow[i].open(map, marker[i]); // 吹き出しの表示\r\n });\r\n }\r\n}\r\n$(function(){\r\n \r\n var modal = document.getElementById('modal');\r\n $('.modalBtn').on('click', function(e) {\r\n modal.addClass('is-active');\r\n });\r\n}) \r\n```\r\n\r\n### 試したこと\r\n\r\nコンソールで、吹き出し内のボタンの情報を確認しましたが、class=\"modalBtn\" data-modalIndex=\"1\"は期待通り入っています。 \r\n\r\nJS初心者で、まだ、スクリプトタグの位置によって、挙動が変わることへの理解ができていません。\r\n今回のモーダルが出ないのも、このことが原因でしょうか?\r\n宜しくお願い致します。","answerCount":2,"upvoteCount":0,"datePublished":"2018-05-03T04:54:41.191Z","dateModified":"2018-05-03T04:54:41.191Z","acceptedAnswer":{"@type":"Answer","text":"これでどうでしょう。\r\n```js\r\n$( 'body' ).on( 'click', '.modalBtn', function( e ) {\r\n modal.addClass( 'is-active' );\r\n} );\r\n```","dateModified":"2018-05-03T05:42:01.571Z","datePublished":"2018-05-03T05:42:01.571Z","upvoteCount":0,"url":"https://teratail.com/questions/124583#reply-189885"},"suggestedAnswer":[{"@type":"Answer","text":"var modal = document.getElementById('modal'); ではなく、\r\nvar modal = document.getElementsByClassName('modal')[0]; です。","dateModified":"2018-05-03T06:36:36.222Z","datePublished":"2018-05-03T06:36:36.222Z","upvoteCount":0,"url":"https://teratail.com/questions/124583#reply-189896","comment":[]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"JavaScriptに関する質問","url":"https://teratail.com/tags/JavaScript"},{"@type":"ListItem","position":3,"name":"JavaScript","url":"https://teratail.com/tags/JavaScript"}]}}}
    質問するログイン新規登録
    JavaScript

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

    jQuery

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

    Q&A

    解決済

    2回答

    1257閲覧

    グーグルマップの吹き出しの内のボタンからモーダルが出ません。

    maroooooooon

    総合スコア14

    JavaScript

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

    jQuery

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

    0グッド

    1クリップ

    投稿2018/05/03 04:54

    0

    1

    前提・実現したいこと

    JSの勉強のために、簡易的なJSでのアプリケーションを作っております。
    グーグルマップAPIを使って、特定エリアにピンを立て、ピンをクリックすると吹き出しが出ます。
    吹き出しの中に、ボタンがあって、そのボタンを押すと、JSのオンクリックが起動し、モーダルが出るようにしたいです。

    発生している問題・エラーメッセージ

    吹き出し内のボタンをクリックしても、モーダルが出現しません。

    該当のソースコード

    html

    1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>JavaScript Sample</title> 6 <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 8 <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> 9 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.min.js"></script> 10 <style type="text/css"> 11 #map { 12 height: 500px; 13 } 14 .modal { 15 display: none; 16 } 17 #slider{ 18 position: center; 19 } 20 </style> 21</head> 22<body> 23 24 <div class="modal"> 25 <div>ここにモーダルで表示させたいものをいれます。</div> 26 </div> 27 28 <div> 29 <h2>今日の天気</h2> 30 <p> 31 <small>現在時刻:</small> 32 <span id="time"></span> 33 <small>場所:</small> 34 <span id="here"></span> 35 <small>現在の気温:</small> 36 <span id="temp"></span> 37 <span id="icon"></span> 38 </p> 39 </div> 40 41 <div class="slider" > 42 <li><img src="source/hogehoge.jpg"/></li> 43 <li><img src="source/hoge.jpg"/></li> 44 </div> 45 46 <p id="map"></p> 47</body> 48<script src="sample/sample.js" type="text/javascript" charset="utf-8"></script> 49<script src="https://maps.googleapis.com/maps/api/js?key=eeeeeee=initMap"></script> 50 51</html> 52

    JS

    1$(function(){ 2 $('.slider').bxSlider({ 3 auto: true, 4 slideWidth: 300, 5 speed: 900, 6 mode: 'fade', 7 nextText: true 8 }); 9}); 10 11 12 13$(function() { 14$.ajax({ 15 url: 16 cache: false, 17 success:function (weatherdata){ 18 // img insert 19 var img = document.createElement('img'); 20 img.src = "http://openweathermap.org/img/w/"+weatherdata.weather[0].icon+".png"; 21 img.alt = weatherdata.weather[0].main; 22 document.getElementById('icon').appendChild(img); 23 // =摂氏+=K 24 document.getElementById('temp').innerHTML = Math.floor(weatherdata.main.temp - 273.15); 25 26 // 位置 27 document.getElementById('here').innerHTML = weatherdata.name; 28 29 } 30 }); 31}); 32setInterval(function(){ 33 var date = new Date(); 34 var time ; 35 time = date.getFullYear()+'.'; 36 time += (date.getMonth()+1)+'.'; 37 time += (date.getDate())+'.'; 38 time += date.getHours()+'.'; 39 time += date.getMinutes()+'.'; 40 time += date.getSeconds(); 41 document.getElementById('time').innerHTML = time; 42 },1000); 43 44 45function initMap() { 46 var data = [ 47 { lat: 36.204824, lng: 138.252924, title: "日本" ,content: '<div class="infobox" id="japan">" <div class="inner"><div class="header"><h3>日本</h3></div><div class="footer"><button class="modalBtn" data-modalIndex="1" type="button">Detail</button></div>'}, 48 // "<img src=source/itprooffice.png>"}, 49 { lat: 51.813707, lng: 0, title: "イギリス" ,content:'<div class="infobox" id="england">" <div class="inner"><div class="header"><h3>イギリス</h3></div><div class="footer"><button class="modalBtn" data-modalIndex="1" type="button">Detail</button></div>'}, 50 ]; 51 52 var infoWindow=[]; 53 var marker=[]; 54 var map = new google.maps.Map(document.getElementById('map'), { // #sampleに地図を埋め込む 55 center: data[0], 56 zoom: 2.5 // 地図のズームを指定 57 }); 58 for (var i = 0; i < data.length; i++) { 59 markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']}; 60 marker[i] = new google.maps.Marker({ 61 position: markerLatLng, 62 map: map, 63 animation: google.maps.Animation.BOUNCE 64 }); 65 infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加 66 content: data[i]['content'] 67 }); 68 markerEvent(i); 69 } 70 71 function markerEvent(i) { 72 marker[i].addListener('click', function() { // マーカーをクリックしたとき 73 infoWindow[i].open(map, marker[i]); // 吹き出しの表示 74 }); 75 } 76} 77$(function(){ 78 79 var modal = document.getElementById('modal'); 80 $('.modalBtn').on('click', function(e) { 81 modal.addClass('is-active'); 82 }); 83})

    試したこと

    コンソールで、吹き出し内のボタンの情報を確認しましたが、class="modalBtn" data-modalIndex="1"は期待通り入っています。 

    JS初心者で、まだ、スクリプトタグの位置によって、挙動が変わることへの理解ができていません。
    今回のモーダルが出ないのも、このことが原因でしょうか?
    宜しくお願い致します。

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

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

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

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

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

    guest

    回答2

    0

    var modal = document.getElementById('modal'); ではなく、
    var modal = document.getElementsByClassName('modal')[0]; です。

    投稿2018/05/03 06:36

    退会済みユーザー

    退会済みユーザー

    総合スコア0

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

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

    0

    ベストアンサー

    これでどうでしょう。

    js

    1$( 'body' ).on( 'click', '.modalBtn', function( e ) { 2 modal.addClass( 'is-active' ); 3} );

    投稿2018/05/03 05:42

    kei344

    総合スコア69643

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

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

    maroooooooon

    2018/05/03 05:52

    ご回答ありがとうございます! 教えて頂いたコードで試してみましたが、モーダルは出ていません、、、
    kei344

    2018/05/03 06:30

    そもそもaddClassが無いですね。 $('#modal').addClass('is-active'); こうしてみてください。 ただ、提示のコードの範囲で 'is-active'をクラスに指定したからといってモーダルが表示されると思えませんが、どこか別に規定しているのでしょうか。
    kei344

    2018/05/03 06:40

    あ、クラスですね。 $('.modal').addClass('is-active');
    maroooooooon

    2018/05/06 09:17

    ありがとうございます! 頂いたアドバイスの元、試行錯誤した結果、動くようになりました!
    guest

    あなたの回答

    tips

    太字

    斜体

    打ち消し線

    見出し

    引用テキストの挿入

    コードの挿入

    リンクの挿入

    リストの挿入

    番号リストの挿入

    表の挿入

    水平線の挿入

    プレビュー

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

    ただいまの回答率
    85.29%

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

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

    質問する

    関連した質問