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

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

ただいまの
回答率

90.52%

  • PHP

    20339questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16415questions

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

  • jQuery

    6703questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5784questions

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

モーダルウィンドウ内の上下を固定したい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 216

science_mac

score 21

いつもお世話になっております。
モーダルウィンドウを実装しているのですが、その中の上下部分だけを固定し、中心部だけをスクロールできるようにしたいと考えています。
モーダルウィンドウ
モーダルウィンドウ内のプルダウン表示①
モーダルウィンドウ内のプルダウン表示②

画像のように上下にボタンやテキストボックスがあるのですが、その部分は常にモーダルウィンドウ内に表示される状態とし、中心にあるプルダウン部分だけをスクロールできるようにしたいです。

実装は以下のようにしています。

        <!-- ここからモーダルウィンドウ実装 -->
        <div id="modal-content">
          <!-- モーダルウィンドウのコンテンツ開始 -->
          <button type="button" name="select_delete" value="select_delete" class="select_delete" onclick="javaScript:DisChecked()">チェックを全て外す</button>
          <br>
          <input type="text" id="keyword" name="keyword" size="30" disabled="disabled"/>
          <div id="material_select">
            <div id="meet_select">
              <p><a href="javaScript:pullDown('id1')">テスト</a></p>
            </div>
            <div id="id1" style="display:none;">
              <div class="all-container">
                <div id="check-label-container">
                  <label class="check-label">
                    <span>テスト1</span>
                    <input type="checkbox" name="check" value="テスト1">
                    <span class="checkmark"></span>
                  </label>
                  <label class="check-label">
                    <span>テスト2</span>
                    <input type="checkbox" name="check" value="テスト2">
                    <span class="checkmark"></span>
                  </label>
                  <label class="check-label">
                    <span>テスト3</span>
                    <input type="checkbox" name="check" value="テスト1">
                    <span class="checkmark"></span>
                  </label>
                  <label class="check-label">
                    <span>テスト4</span>
                    <input type="checkbox" name="check" value="テスト1">
                    <span class="checkmark"></span>
                  </label>
                  <label class="check-label">
                    <span>テスト5</span>
                    <input type="checkbox" name="check" value="テスト1">
                    <span class="checkmark"></span>
                  </label>
                  <label class="check-label">
                    <span>テスト6</span>
                    <input type="checkbox" name="check" value="テスト1">
                    <span class="checkmark"></span>
                  </label>
                </div>
              </div>
            </div>
            <div id="fish_select">
              <p><a href="javaScript:pullDown('id2')">テスト</a></p>
            </div>
            <div id="id2" style="display:none;">
              <div class="all-container">
                <div id="check-label-container">
                  <label class="check-label">
                    <span>テスト1</span>
                    <input type="checkbox" name="check" value="テスト1">
                    <span class="checkmark"></span>
                  </label>
                  <label class="check-label">
                    <span>テスト2</span>
                    <input type="checkbox" name="check" value="テスト2">
                    <span class="checkmark"></span>
                  </label>
                </div>
                </div>
                </div>
                <div id="vegetables_select">
                  <p><a href="javaScript:pullDown('id3')">テスト</a></p>
                </div>
                <div id="id3" style="display:none;">
                  <div class="all-container">
                    <div id="check-label-container">
                      <label class="check-label">
                        <span>テスト1</span>
                        <input type="checkbox" name="check" value="テスト1">
                        <span class="checkmark"></span>
                      </label>
                      <label class="check-label">
                        <span>テスト2</span>
                        <input type="checkbox" name="check" value="テスト2">
                        <span class="checkmark"></span>
                      </label>
                    </div>
                    </div>
                    </div>
          </div>
            <div id="select_ok">
              <button type="button" name="select_ok" value="select_ok" class="select_ok" onclick="javaScript:OK()">OK</button>
            </div>
        </div>
        <input id="modal-open" value="モーダル表示" class="button-link">
        <!-- ここまでモーダルウィンドウ -->
<script>
jQuery(function($){

//モーダルウィンドウを出現させるクリックイベント
$("#header-modal-open").click( function(){

    //キーボード操作などにより、オーバーレイが多重起動するのを防止する
    $( this ).blur() ;    //ボタンからフォーカスを外す
    if( $( "#header-modal-overlay" )[0] ) return false ;        //新しくモーダルウィンドウを起動しない (防止策1)
    //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;        //現在のモーダルウィンドウを削除して新しく起動する (防止策2)

    //オーバーレイを出現させる
    $( "body" ).append( '<div id="header-modal-overlay"></div>' ) ;
    $( "#header-modal-overlay" ).fadeIn( "slow" ) ;

    //コンテンツをセンタリングする
    centeringModalSyncer() ;

    //コンテンツをフェードインする
    $( "#header-modal-content" ).fadeIn( "slow" ) ;
    //$("body").css("position","fixed");

    //[#modal-overlay]、または[#modal-close]をクリックしたら…
    $( "#header-modal-overlay,#header-modal-close" ).unbind().click( function(){

        //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
        $( "#header-modal-content,#header-modal-overlay" ).fadeOut( "slow" , function(){

            //[#modal-overlay]を削除する
             $("body").css("position","static");
            $('#header-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 = $( "#header-modal-content" ).outerWidth();
        var ch = $( "#header-modal-content" ).outerHeight();

        //センタリングを実行する
        $( "#header-modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;

    }

} ) ;

</script>

<!-- プルダウン実装用 -->
<script>
<!--
function pullDown(id) {
    obj = document.getElementById(id);
    if(obj.style.display == "none") {
        obj.style.display = "block";
    } else {
        obj.style.display = "none";
    }
}
//-->
</script>
button.select_delete {
    /* 文字サイズの指定 */
    font-size: 0.9em;
    /* 角丸の指定 */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    WIDTH: 150px;
    HEIGHT: 38px;
    color: white;
    background-color:#a5a5a5;
    border-color:#a5a5a5;
    margin-top: 10px;
    margin-bottom: 10px;
}

button.select_ok {
    /* 文字サイズの指定 */
    font-size: 0.9em;
    /* 角丸の指定 */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    WIDTH: 200px;
    HEIGHT: 38px;
    color:white;
    background-color:#ff5f41;
    border-color:#ff5f41;
}

#modal-content{
    width:50%;
    height:350px;
    margin:1.5em auto 0;
    padding:10px 20px;
    border:2px solid #aaa;
    background:#fff;
    z-index:2;
    position:fixed;
    display:none;
    overflow-y: auto;
    text-align:center;
}

div.material_select {
}

.button-link{
    margin-bottom : 20px;
    text-align:center;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    WIDTH: 200px;
    HEIGHT: 38px;
    font-size:15px;
    color: white;
    background-color:#008000;
    border-color:#92d050;
}

.button-link:hover{
    cursor:pointer;
}

#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);
}

プルダウン部分のmaterial_select部分だけスクロールできるようにoverflowなどをcssに記載してみたのですがうまくいかず...

ヒントのような情報で構いませんので、どなたかご教授いただけないでしょうか。

不足している情報などありましたらご指摘ください。
よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/05/13 17:31

    自力実装なのでしょうかCSSフレームワークなのでしょうか。その辺りを分かるように記載してください。

    キャンセル

  • mts10806

    2018/05/13 17:32

    具体的にやったことと起きたことを書いてください。 > overflowなどをcssに記載してみたのですがうまくいかず...

    キャンセル

  • science_mac

    2018/05/13 18:03

    実装は自力実装となります 試してみたこととしてはモーダルウィンドウ内のプルダウン部分(divのmaterial_select部分)のcssにoverflow:scrollを記載して、プルダウン部分のみスクロールされるようにしてみたのですが、そもそもスクロール自体が出来ないようになってしまいました

    キャンセル

回答 2

checkベストアンサー

+2

#material_select{
  height: 230px;
  overflow-y: auto;
}


高さを指定しないとoverflowが効かないです。
ちなみにcssに".material_select{}"とありましたので、セレクタの記述ミスだった可能性も…

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/14 21:14

    ありがとうございます。
    高さを指定していないというなんとも間抜けな話でしたね...

    cssにあった.material_select{}はすいません、いったん中身を消していただけでした。
    ご指摘通りに修正したところ、期待通りの動きになりました。
    ありがとうございました。

    キャンセル

+1

Grid を使うとか、スクロールする要素に高さを指定するとかすればよいと思います。

【CSS Grid Layout を極める!(基礎編) - Qiita】
https://qiita.com/kura07/items/e633b35e33e43240d363

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/14 21:12

    いつもご回答ありがとうございます。
    自分の知らない技術が多くてお恥ずかしい限りです...

    参考にさせていただきます。
    ありがとうございます。

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    20339questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16415questions

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

  • jQuery

    6703questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5784questions

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