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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2077閲覧

複数だと表示されない・・・

8971pc

総合スコア13

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/21 09:26

以前、モーダルウィンドウを開いた後、そこにラッキーカラーを表示しようとしました。
乱数によって色を表示することを考えていましたが表示されません。
というようなしつもんをしました。
それについては、ご協力があり、解決することができたのですが複数そのような表示をしようとすると、両方とも表示されません。ちなみに、今回はラッキーカラーとラッキーアイテムを表示しようと思っています。そのコードが以下です。

<!-- ここからモーダルウィンドウ --> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="modal-content"> <a>ラッキーカラー:</a> <span id="color"></span> <br> <a>ラッキーアイテム:</a> <span id="item"></span> <p><a class="button-link" id="modal-close">閉じる</a></p><!-- モーダルウィンドウのコンテンツ終了 --> </div> <p><a class="button-link" id="modal-open">button</a></p><!-- ここまでモーダルウィンドウ --> <script type="text/javascript"> var rand-01 = Math.floor( Math.random() * 5) ; if (rand-01 == 0) msg = "青"; if (rand-01 == 1) msg = "赤"; if (rand-01 == 2) msg = "黄色"; if (rand-01 == 3) msg = "緑"; if (rand-01 == 4) msg = "白"; document.getElementById("color").innerHTML = msg; var rand-02 = Math.floor( Math.random() * 5) ; if (rand-02 == 0) msg = "帽子"; if (rand-02 == 1) msg = "腕時計"; if (rand-02 == 2) msg = "鞄"; if (rand-02 == 3) msg = "うちわ"; if (rand-02 == 4) msg = "ペン"; document.getElementById("item").innerHTML = msg; </script> <style type="text/css"> a.button-link { position: relative; display: block; width: 160px; padding: 0.8em; text-align: center; font-weight: bold; text-decoration: none; color: #FFF; text-shadow: 0 0 5px rgba(255, 255, 255, 0.0); background: #1A237E; transition: .4s; border-radius: 4px; } .button-link{ margin-left : 60px; text-align:center; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } a.cp_btn:hover { text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83); transition: .4s; } #modal-content{ width:50%; margin:1.5em auto 0; padding:10px 20px; border:2px solid #aaa; background:#fff; z-index:2; position:fixed; display:none; overflow: auto; } #modal-content{ max-height: calc(100vh - 1.5em); } #modal-overlay{ z-index:1; display:none; position:fixed; top:0; left:0; width:100%; height:120%; background-color:rgba(0,0,0,0.75); } </style> <script src="//code.jquery.com/jquery-1.10.2.min.js"> </script> <script src="jquery.translate.js"> </script> <script> jQuery(function($){ //モーダルウィンドウを出現させるクリックイベント $("#modal-open").click( function(){ //キーボード操作などにより、オーバーレイが多重起動するのを防止する $( this ).blur() ; //ボタンからフォーカスを外す if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1) //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する (防止策2) //オーバーレイを出現させる $( "body" ).append( '<div id="modal-overlay"></div>' ) ; $( "#modal-overlay" ).fadeIn( "slow" ) ; //コンテンツをセンタリングする centeringModalSyncer() ; //コンテンツをフェードインする $( "#modal-content" ).fadeIn( "slow" ) ; //[#modal-overlay]、または[#modal-close]をクリックしたら… $( "#modal-overlay,#modal-close" ).unbind().click( function(){ //[#modal-content]と[#modal-overlay]をフェードアウトした後に… $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){ //[#modal-overlay]を削除する $('#modal-overlay').remove() ; } ) ; } ) ; } ) ; //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する $( window ).resize( centeringModalSyncer ) ; //センタリングを実行する関数 function centeringModalSyncer() { //画面(ウィンドウ)の幅、高さを取得 var w = $( window ).width() ; var h = $( window ).height() ; // コンテンツ(#modal-content)の幅、高さを取得 // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。 // var cw = $( "#modal-content" ).outerWidth( {margin:true} ); // var ch = $( "#modal-content" ).outerHeight( {margin:true} ); var cw = $( "#modal-content" ).outerWidth(); var ch = $( "#modal-content" ).outerHeight(); //センタリングを実行する $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ; } } ) ; </script> </body> </html>

間違えているところがわかりましたら、教えていただくと幸いです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

拝見しましたが修正点が多すぎます。

  • HTMLの基本から
<head> <link rel="stylesheet" href="xxx.css"> <style>タグ <script type="text/javascript" src="yyy.js"></script> <script>タグ </head> 特殊な例を除き<head>タグの中に書いてください ブラウザーはHTMLを上から順番に読み込んで処理を行います。
  • モーダルウインドウの記載場所
<div id="modal-content"> </div> で囲まれた中身がモーダルウインドウの中身です (コメントがおかしかったですよ)
  • <style>タグ

まず
jQuery(function($){
ここは
$(function() {
に直しましたが意味は同じで
HTMLが読み込まれた時に処理を行いますよという意味です。

その前に書かれたJavaScripもfunction指定が無いので
そのままだとscriptのその部分を読んだ時点で処理を行う
となりますのでfunctionで囲んで下さい。

  • 変数名に'-'は使えません。

引き算と同じになるからです。
× rand-01
○ rand_01
書くなら'_'などを使用してください。

  • 色指定で漢字で'赤','青','黄色'と書いてもダメです

もし名称で書きたいのなら'red','blue','yellow'と英名で書いてください。
原色大辞典
今回は英名にない色も指定できるRGB表記で記載しています。

「動いた」だけで済まさずに「なぜ動いたのだろう」まで気を配ってみて下さい。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<style type="text/css"> 6 a.button-link { 7 position: relative; 8 display: block; 9 width: 160px; 10 padding: 0.8em; 11 text-align: center; 12 font-weight: bold; 13 text-decoration: none; 14 color: #FFF; 15 text-shadow: 0 0 5px rgba(255, 255, 255, 0.0); 16 background: #1A237E; 17 transition: .4s; 18 border-radius: 4px; 19 } 20 .button-link{ 21 margin-left : 60px; 22 text-align:center; 23 -moz-border-radius: 5px; 24 -webkit-border-radius: 5px; 25 border-radius: 5px; 26 } 27 28 a.cp_btn:hover { 29 text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83); 30 transition: .4s; 31 } 32 #modal-content{ 33 width:50%; 34 margin:1.5em auto 0; 35 padding:10px 20px; 36 border:2px solid #aaa; 37 background:#fff; 38 z-index:2; 39 position:fixed; 40 display:none; 41 overflow: auto; 42 } 43 #modal-content{ 44 max-height: calc(100vh - 1.5em); 45 } 46 47 48 #modal-overlay{ 49 z-index:1; 50 display:none; 51 position:fixed; 52 top:0; 53 left:0; 54 width:100%; 55 height:120%; 56 background-color:rgba(0,0,0,0.75); 57 } 58</style> 59<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 60<script src="jquery.translate.js"></script> 61<script type="text/javascript"> 62 $(function() { 63 //モーダルウィンドウを出現させるクリックイベント 64 $("#modal-open").click( function(){ 65 66 //キーボード操作などにより、オーバーレイが多重起動するのを防止する 67 $( this ).blur() ; //ボタンからフォーカスを外す 68 //if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1) 69 //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する (防止策2) 70 71 //オーバーレイを出現させる 72 $( "body" ).append( '<div id="modal-overlay"></div>' ) ; 73 $( "#modal-overlay" ).fadeIn( "slow" ) ; 74 75 //コンテンツをセンタリングする 76 centeringModalSyncer() ; 77 78 //モーダル画面を表示する前にする処理 79 initModal(); 80 81 //コンテンツをフェードインする 82 $( "#modal-content" ).fadeIn( "slow" ) ; 83 84 //[#modal-overlay]、または[#modal-close]をクリックしたら… 85 $( "#modal-overlay,#modal-close" ).unbind().click( function(){ 86 87 //[#modal-content]と[#modal-overlay]をフェードアウトした後に… 88 $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){ 89 90 //[#modal-overlay]を削除する 91 $('#modal-overlay').remove() ; 92 93 } ) ; 94 95 } ) ; 96 97 } ) ; 98 99 //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する 100 $( window ).resize( centeringModalSyncer ) ; 101 102 //センタリングを実行する関数 103 function centeringModalSyncer() { 104 105 //画面(ウィンドウ)の幅、高さを取得 106 var w = $( window ).width() ; 107 var h = $( window ).height() ; 108 109 // コンテンツ(#modal-content)の幅、高さを取得 110 // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。 111 // var cw = $( "#modal-content" ).outerWidth( {margin:true} ); 112 // var ch = $( "#modal-content" ).outerHeight( {margin:true} ); 113 var cw = $( "#modal-content" ).outerWidth(); 114 var ch = $( "#modal-content" ).outerHeight(); 115 116 //センタリングを実行する 117 $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ; 118 119 } 120 } ) ; 121 122 //モーダル画面を表示する前にする処理 123 function initModal(){ 124 var color = ''; 125 var msg = ''; 126 var rand_01 = Math.floor( Math.random() * 5) ; 127 if (rand_01 == 0) color = "#0000ff"; //青 128 if (rand_01 == 1) color = "#ff0000"; //赤 129 if (rand_01 == 2) color = "#ffff00"; //黄色 130 if (rand_01 == 3) color = "#00FF00"; //緑 131 if (rand_01 == 4) color = "#FFFFFF"; //白 132 $("#color").css("background-color",color); 133 var rand_02 = Math.floor( Math.random() * 5) ; 134 if (rand_02 == 0) msg = "帽子"; 135 if (rand_02 == 1) msg = "腕時計"; 136 if (rand_02 == 2) msg = "鞄"; 137 if (rand_02 == 3) msg = "うちわ"; 138 if (rand_02 == 4) msg = "ペン"; 139 $("#item").html(msg); 140 } 141 142</script> 143</head> 144<body> 145 <!-- ここからモーダルウィンドウ --> 146 <div id="modal-content"> 147 <a>ラッキーカラー:</a> <span id="color"></span> 148 <br> 149 <a>ラッキーアイテム:</a> <span id="item"></span> 150 <p> 151 <a class="button-link" id="modal-close">閉じる</a> 152 </p> 153 </div> 154 <!-- ここまでがモーダルウィンドウ --> 155 156 <p> 157 <a class="button-link" id="modal-open">button</a> 158 </p> 159</body> 160</html>

投稿2020/09/21 11:51

編集2020/09/21 11:55
kuma_kuma_

総合スコア2506

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問