スライドメニューとモーダルウィンドウを動かしたいのですが、二重で読み込んでいるためどちらかしか動きません。
コピペで作っているため、解決法がわからず困っています。
よろしくお願いします。
###該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /><!-- ここまでモーダルウィンドウ --><title>bike-map</title> <link type="text/css" rel="stylesheet" href="css/demo.css" /> <link type="text/css" rel="stylesheet" href="../dist/css/jquery.mmenu.all.css" /> <!-- スタイルシートの読み込み --> <link href="modal.css" rel="stylesheet"> <!-- ビューポートの設定 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.js"></script> <script type="text/javascript" src="../dist/js/jquery.mmenu.all.min.js"></script> <script type="text/javascript"> $(function() { $('nav#menu').mmenu(); }); </script> <!-- JavaScriptの読み込み --> <script src="../dist/js/jquery.min.js"></script> <script src="modal.js"></script> <style> html, body { height: 100%; margin: 0; padding: 0; } map { height: 80%; width: 80%; } </style> </head> <body> <div id="page"> <div class="header"> <a href="#menu"><span></span></a> map </div> <nav id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> </ul> </nav> </div> <div id="map"> <img src="./img/map.png"> </div> <div id="footer"> <div class=pen> <p><a id="modal-open" class="button-link"><img src="./img/pen.png"></a></p> </div> </div> <!-- ここからモーダルウィンドウ --> <div id="modal-content"> <!-- モーダルウィンドウのコンテンツ開始 --> <div> <label>場所名:<br /> <input type="text" name="name" size="50" maxlength="255" /> </label> </div> <div> <label>評価:<br /> <select name="grade"><%=createOption(1, 5)%></select> </label> </div> <div> <label>危険度:<br /> <select name="danger"><%=createOption(1, 5)%></select> </label> </div> <div> <label>コメント:<br /> <input type="text" name="comment" size="50" maxlength="255" /> </label> </div> <label>lat: <input type="text" name="lat" size="50" maxlength="255" /> </label><br /> <label>lng: <input type="text" name="lng" size="50" maxlength="255" /> </label> <div> <input type="submit" value="登録" /> </div> <p><a id="modal-close" class="button-link">閉じる</a></p> <!-- モーダルウィンドウのコンテンツ終了 --> </div>
</html></body>
```**modal.js** $(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"} ) ; } } ) ;
@charset "UTF-8"; /* ここからデモページ用のコード */ body { width: 100% ; height: 5000px ; padding: 0 ; } /* ここまでデモページ用のコード */ modal-content { width: 50% ; margin: 0 ; padding: 10px 20px ; border: 2px solid #aaa ; background: #fff ; position: fixed ; display: none ; z-index: 2 ; } 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 ) ; } .button-link { color: #00f ; text-decoration: underline ; } .button-link:hover { cursor: pointer ; color: #f00 ; }
html, body { padding: 0; margin: 0; } body { background-color: #fff; font-family: Arial, Helvetica, Verdana; font-size: 14px; line-height: 22px; color: #666; position: relative; -webkit-text-size-adjust: none; } body * { text-shadow: none; } h1, h2, h3, h4, h5, h6 { line-height: 1; font-weight: bold; margin: 20px 0 10px 0; } h1, h2, h3 { font-size: 18px; } h4, h5, h6 { font-size: 16px; } p { margin: 0 0 10px 0; } a, a:link, a:active, a:visited, a:hover { color: inherit; text-decoration: underline; } nav:not(.mm-menu) { display: none; } .header, .content, .footer { text-align: center; } .header { background: linear-gradient(-135deg, #E4A972, #9941D8);; font-size: 16px; font-weight: bold; color: #fff; line-height: 40px; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 40px; padding: 0 50px; } footer { background: linear-gradient(-135deg, #E4A972, #9941D8); /* 背景色(黒) */ width:100%; /* 横の幅を100% */ height: 30px; /* 縦の幅を120px */ position: fixed; /* 絶対位置指定することを定義 */ bottom: 0px; /* 絶対位置指定(左0px,下0px) */ padding: 10px 0; /* 上下に余白を取る */ } .pen { text-align: center; } .header.fixed { position: fixed; top: 0; left: 0; } .footer.fixed { position: fixed; bottom: 0; left: 0; } .header a { display: block; width: 28px; height: 18px; padding: 11px; position: absolute; top: 0; left: 0; } .header a:before, .header a:after { content: ''; display: block; background: #fff; height: 2px; } .header a span { background: #fff; display: block; height: 2px; margin: 6px 0; } .content { padding: 150px 50px 50px 50px; }
###試したこと
現状:左上のスライドメニューは機能しませんが、モーダルウィンドウは画像のように表示されます。
コメントを参考にさせていただき
<script src="../dist/js/jquery.min.js"></script>を消すとスライドメニューとモーダルウィンドウは動きましたが、モーダルウィンドウ内の選択ができなくなりました。
###補足情報(言語/FW/ツール等のバージョンなど)
コードブロックに関して
ハッシュタグで段落分けされていて誤解を招いた可能性があります。
上記のhtmlで一つのコードです。
申し訳ございません。
特定に関して
jquery.min.jsを読み込むとスライドメニューが動かなくなるので、jqueryの二重読み込みが原因かと
安直な考えですいません。
回答4件
あなたの回答
tips
プレビュー