Q&A
以前、モーダルウィンドウを開いた後、そこにラッキーカラーを表示しようとしました。
乱数によって色を表示することを考えていましたが表示されません。というようなしつもんをしました。
それについては、ご協力があり、解決することができたのですが複数そのような表示をしようとすると、両方とも表示されません。ちなみに、今回はラッキーカラーとラッキーアイテムを表示しようと思っています。そのコードが以下です。
<!-- ここからモーダルウィンドウ --> <!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>
間違えているところがわかりましたら、教えていただくと幸いです。
回答1件
0
ベストアンサー
拝見しましたが修正点が多すぎます。
- HTMLの基本から
- モーダルウインドウの記載場所
- <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
総合スコア2506
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。