Q&A
自力実装なのでしょうかCSSフレームワークなのでしょうか。その辺りを分かるように記載してください。
いつもお世話になっております。
モーダルウィンドウを実装しているのですが、その中の上下部分だけを固定し、中心部だけをスクロールできるようにしたいと考えています。
画像のように上下にボタンやテキストボックスがあるのですが、その部分は常にモーダルウィンドウ内に表示される状態とし、中心にあるプルダウン部分だけをスクロールできるようにしたいです。
実装は以下のようにしています。
PHP
1 <!-- ここからモーダルウィンドウ実装 --> 2 <div id="modal-content"> 3 <!-- モーダルウィンドウのコンテンツ開始 --> 4 <button type="button" name="select_delete" value="select_delete" class="select_delete" onclick="javaScript:DisChecked()">チェックを全て外す</button> 5 <br> 6 <input type="text" id="keyword" name="keyword" size="30" disabled="disabled"/> 7 <div id="material_select"> 8 <div id="meet_select"> 9 <p><a href="javaScript:pullDown('id1')">テスト</a></p> 10 </div> 11 <div id="id1" style="display:none;"> 12 <div class="all-container"> 13 <div id="check-label-container"> 14 <label class="check-label"> 15 <span>テスト1</span> 16 <input type="checkbox" name="check" value="テスト1"> 17 <span class="checkmark"></span> 18 </label> 19 <label class="check-label"> 20 <span>テスト2</span> 21 <input type="checkbox" name="check" value="テスト2"> 22 <span class="checkmark"></span> 23 </label> 24 <label class="check-label"> 25 <span>テスト3</span> 26 <input type="checkbox" name="check" value="テスト1"> 27 <span class="checkmark"></span> 28 </label> 29 <label class="check-label"> 30 <span>テスト4</span> 31 <input type="checkbox" name="check" value="テスト1"> 32 <span class="checkmark"></span> 33 </label> 34 <label class="check-label"> 35 <span>テスト5</span> 36 <input type="checkbox" name="check" value="テスト1"> 37 <span class="checkmark"></span> 38 </label> 39 <label class="check-label"> 40 <span>テスト6</span> 41 <input type="checkbox" name="check" value="テスト1"> 42 <span class="checkmark"></span> 43 </label> 44 </div> 45 </div> 46 </div> 47 <div id="fish_select"> 48 <p><a href="javaScript:pullDown('id2')">テスト</a></p> 49 </div> 50 <div id="id2" style="display:none;"> 51 <div class="all-container"> 52 <div id="check-label-container"> 53 <label class="check-label"> 54 <span>テスト1</span> 55 <input type="checkbox" name="check" value="テスト1"> 56 <span class="checkmark"></span> 57 </label> 58 <label class="check-label"> 59 <span>テスト2</span> 60 <input type="checkbox" name="check" value="テスト2"> 61 <span class="checkmark"></span> 62 </label> 63 </div> 64 </div> 65 </div> 66 <div id="vegetables_select"> 67 <p><a href="javaScript:pullDown('id3')">テスト</a></p> 68 </div> 69 <div id="id3" style="display:none;"> 70 <div class="all-container"> 71 <div id="check-label-container"> 72 <label class="check-label"> 73 <span>テスト1</span> 74 <input type="checkbox" name="check" value="テスト1"> 75 <span class="checkmark"></span> 76 </label> 77 <label class="check-label"> 78 <span>テスト2</span> 79 <input type="checkbox" name="check" value="テスト2"> 80 <span class="checkmark"></span> 81 </label> 82 </div> 83 </div> 84 </div> 85 </div> 86 <div id="select_ok"> 87 <button type="button" name="select_ok" value="select_ok" class="select_ok" onclick="javaScript:OK()">OK</button> 88 </div> 89 </div> 90 <input id="modal-open" value="モーダル表示" class="button-link"> 91 <!-- ここまでモーダルウィンドウ -->
JavaScript
1<script> 2jQuery(function($){ 3 4//モーダルウィンドウを出現させるクリックイベント 5$("#header-modal-open").click( function(){ 6 7 //キーボード操作などにより、オーバーレイが多重起動するのを防止する 8 $( this ).blur() ; //ボタンからフォーカスを外す 9 if( $( "#header-modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1) 10 //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する (防止策2) 11 12 //オーバーレイを出現させる 13 $( "body" ).append( '<div id="header-modal-overlay"></div>' ) ; 14 $( "#header-modal-overlay" ).fadeIn( "slow" ) ; 15 16 //コンテンツをセンタリングする 17 centeringModalSyncer() ; 18 19 //コンテンツをフェードインする 20 $( "#header-modal-content" ).fadeIn( "slow" ) ; 21 //$("body").css("position","fixed"); 22 23 //[#modal-overlay]、または[#modal-close]をクリックしたら… 24 $( "#header-modal-overlay,#header-modal-close" ).unbind().click( function(){ 25 26 //[#modal-content]と[#modal-overlay]をフェードアウトした後に… 27 $( "#header-modal-content,#header-modal-overlay" ).fadeOut( "slow" , function(){ 28 29 //[#modal-overlay]を削除する 30 $("body").css("position","static"); 31 $('#header-modal-overlay').remove() ; 32 33 } ) ; 34 35 } ) ; 36 37} ) ; 38 39//リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する 40$( window ).resize( centeringModalSyncer ) ; 41 42 //センタリングを実行する関数 43 function centeringModalSyncer() { 44 45 //画面(ウィンドウ)の幅、高さを取得 46 var w = $( window ).width() ; 47 var h = $( window ).height() ; 48 49 // コンテンツ(#modal-content)の幅、高さを取得 50 // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。 51// var cw = $( "#modal-content" ).outerWidth( {margin:true} ); 52// var ch = $( "#modal-content" ).outerHeight( {margin:true} ); 53 var cw = $( "#header-modal-content" ).outerWidth(); 54 var ch = $( "#header-modal-content" ).outerHeight(); 55 56 //センタリングを実行する 57 $( "#header-modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ; 58 59 } 60 61} ) ; 62 63</script> 64 65<!-- プルダウン実装用 --> 66<script> 67<!-- 68function pullDown(id) { 69 obj = document.getElementById(id); 70 if(obj.style.display == "none") { 71 obj.style.display = "block"; 72 } else { 73 obj.style.display = "none"; 74 } 75} 76//--> 77</script>
CSS
1button.select_delete { 2 /* 文字サイズの指定 */ 3 font-size: 0.9em; 4 /* 角丸の指定 */ 5 -moz-border-radius: 5px; 6 -webkit-border-radius: 5px; 7 border-radius: 5px; 8 WIDTH: 150px; 9 HEIGHT: 38px; 10 color: white; 11 background-color:#a5a5a5; 12 border-color:#a5a5a5; 13 margin-top: 10px; 14 margin-bottom: 10px; 15} 16 17button.select_ok { 18 /* 文字サイズの指定 */ 19 font-size: 0.9em; 20 /* 角丸の指定 */ 21 -moz-border-radius: 5px; 22 -webkit-border-radius: 5px; 23 border-radius: 5px; 24 WIDTH: 200px; 25 HEIGHT: 38px; 26 color:white; 27 background-color:#ff5f41; 28 border-color:#ff5f41; 29} 30 31#modal-content{ 32 width:50%; 33 height:350px; 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-y: auto; 42 text-align:center; 43} 44 45div.material_select { 46} 47 48.button-link{ 49 margin-bottom : 20px; 50 text-align:center; 51 -moz-border-radius: 5px; 52 -webkit-border-radius: 5px; 53 border-radius: 5px; 54 WIDTH: 200px; 55 HEIGHT: 38px; 56 font-size:15px; 57 color: white; 58 background-color:#008000; 59 border-color:#92d050; 60} 61 62.button-link:hover{ 63 cursor:pointer; 64} 65 66#modal-overlay{ 67 z-index:1; 68 display:none; 69 position:fixed; 70 top:0; 71 left:0; 72 width:100%; 73 height:120%; 74 background-color:rgba(0,0,0,0.75); 75}
プルダウン部分のmaterial_select部分だけスクロールできるようにoverflowなどをcssに記載してみたのですがうまくいかず...
ヒントのような情報で構いませんので、どなたかご教授いただけないでしょうか。
不足している情報などありましたらご指摘ください。
よろしくお願いします。
具体的にやったことと起きたことを書いてください。 ＞ overflowなどをcssに記載してみたのですがうまくいかず...
実装は自力実装となります 試してみたこととしてはモーダルウィンドウ内のプルダウン部分(divのmaterial_select部分)のcssにoverflow:scrollを記載して、プルダウン部分のみスクロールされるようにしてみたのですが、そもそもスクロール自体が出来ないようになってしまいました
回答2件
0
ベストアンサー
css
1#material_select{ 2 height: 230px; 3 overflow-y: auto; 4}
高さを指定しないとoverflowが効かないです。
ちなみにcssに".material_select{}"とありましたので、セレクタの記述ミスだった可能性も…
投稿2018/05/14 00:59
総合スコア251
ありがとうございます。
高さを指定していないというなんとも間抜けな話でしたね...
cssにあった.material_select{}はすいません、いったん中身を消していただけでした。
ご指摘通りに修正したところ、期待通りの動きになりました。
ありがとうございました。
0
Grid を使うとか、スクロールする要素に高さを指定するとかすればよいと思います。
【CSS Grid Layout を極める！（基礎編） - Qiita】
https://qiita.com/kura07/items/e633b35e33e43240d363
投稿2018/05/13 16:09
総合スコア69400
あなたの回答
tips
プレビュー
