Q&A
モーダルウィンドウを開いた後、そこにラッキーカラーを表示しようとしました。
乱数によって色を表示することを考えていましたが表示されませんでした。
表示されなかったコードは以下です。
<!-- ここからモーダルウィンドウ --> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="modal-content"> <a>ラッキーカラー：</a> <span id="color"></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 = Math.floor( Math.random() * 5) ; //おみくじの目の生成 if (rand == 0) msg = "青"; if (rand == 1) msg = "赤"; if (rand == 2) msg = "黄色"; if (rand == 3) msg = "緑"; if (rand == 4) msg = "白"; document.getElementById("color").innerHTML = num; </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>
間違えているところがわかりましたら、教えていただくと幸いです。
回答3件
0
ほかにもいろいろツッコミどころはありますが、色の名前を表示するだけなら、
Diff
1- document.getElementById("color").innerHTML = num; 2+ document.getElementById("color").innerHTML = msg;
投稿2020/09/21 04:14
総合スコア11990
0
modal処理するならいっそjquery.modalを利用する方がよいでしょう
javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script> 3<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" /> 4 5 6<script> 7$(function(){ 8 var msgs=["青","赤","黄色","緑","白"]; 9 $('#btn').on('click',function(){ 10 msgs=msgs.map(x=>[x,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]); 11 $("#color").html(msgs[0]); 12 }); 13}); 14</script> 15<div id="modal-content" class="modal"> 16<a>ラッキーカラー：</a> <span id="color"></span> 17<p><a href="#" rel="modal:close">閉じる</a></p> 18</div> 19<p><a href="#modal-content" rel="modal:open" id="btn">button</a></p>
投稿2020/09/21 04:30
総合スコア116730
0
ベストアンサー
document.getElementById("color").innerHTML = num; の部分、num がどこにも定義されていません。 msg では？
投稿2020/09/21 04:01
総合スコア69606
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。