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

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

ただいまの
回答率

90.74%

  • PHP

    19148questions

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

  • JavaScript

    15231questions

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

  • jQuery

    6307questions

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

  • CSS

    5306questions

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

モーダルウィンドウを表示した時に背景のコンテンツがずれるのを直したい

解決済

回答 1

投稿 編集

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

science_mac

score 21

いつもお世話になっております。

jQueryでモーダルウィンドウを実装しているのですが、モーダルウィンドウを表示した際に背景のコンテンツが左にずれるという現象が発生しております。

なぜずれてしまうのか原因が分からないため、どこが原因になっているかを知りたいです。
対策については指摘いただいた原因を基にして考えられたらなと思っています。

<div class="tabs_wrap">
  <ul class="tabs">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
  <div class="tabs_content">
    <div>
      <p>
        <!-- ここからモーダルウィンドウ実装 -->
        <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>
                </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">
        <!-- ここまでモーダルウィンドウ -->
        <form action="search-result" method="get">
          <input type="hidden" name="page_no" value="1">
          <span style="border: 1px solid #cccccc; padding: 10px; background: #f2f2f2;">
            <input id="selected_only" type="checkbox" name="selected_only" value="true">
            <label for="selected_only">チェックボックス</label>
          </span>
          <br>
          <div class="front_recipe_search">
            <input id="front_searchfield" type="text" maxlength="30" placeholder="例) テスト" name="materials" class="front_searchfield" value=""/>
            <button type="submit" value="materials" name="type" class="search">検索</button>
            <button type="reset" value="クリアする" name="form_clear" class="form_clear">クリアする</button>
          </div>
        </form>
      </p>
    </div>

    <div>
      <p>
        <form action="search-result" method="get">
          <input type="hidden" name="page_no" value="1">
          <input type="text" placeholder="例) テスト" name="recipe_name" class="front_recipename_searchfield">
          <br>
          <button type="submit" value="name" name="type" class="recipename_search">検索</button>
        <br>
        <br>
        <button type="reset" class="form_clear_name">クリアする</button>
      </form>
      </p>
    </div>

    <div>
    <p>
        <form action="search-result" method="get">
                <input type="hidden" name="type" value="genre">
                <input type="hidden" name="page_no" value="1">
                <button type="submit" value="VEGETABLE" name="genre" class="genre">テスト</button>
                <button type="submit" value="RICE" name="genre" class="genre">テスト</button>
                <br>
                <br>
                <button type="submit" value="MEAT_DISH" name="genre" class="genre">テスト</button>
                <button type="submit" value="FISH_DISH" name="genre" class="genre">テスト</button>
                <br>
                <br>
                <button type="submit" value="NOODLES" name="genre" class="genre">テスト</button>
                <button type="submit" value="SOUP_STOCK" name="genre" class="genre">テスト</button>
                <br>
                <br>
                <button type="submit" value="CASSEROLE" name="genre" class="genre">テスト</button>
                <button type="submit" value="OTHERS" name="genre" class="genre">テスト</button>
                <br>
                </form>
      </p>
    </div>

  </div>
</div>

※jQueryで書いています。

<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" ) ;
    $("body").css("position","fixed");

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

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

            //[#modal-overlay]を削除する
             $("body").css("position","static");
            $('#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 {
    background-color: #ffffe1;
}

/* メニュータブ */
ul.tabs {
    width: 880px;
    margin-top: 200px;
    margin-left: auto;
    margin-right : auto;
    list-style: none;
}
ul.tabs li {
    background: #e2f0d9;
    border-right: 1px solid #ff3c14;
    border-top: 1px solid #ff3c14;
    border-bottom: none;
    margin-bottom: 0;
    float: left;
}

ul.tabs li:first-child {
    border-left: 1px solid #ff3c14;
}

ul.tabs li.active {
    border-bottom: 1px solid #FFF;
    background-color: white;
    margin-bottom: -1px;
}
ul.tabs li a {
    display: block;
    padding: 5px 10px;
    color: #777;
    text-decoration: none;
}
ul.tabs li.active a {
    font-weight: bold;
    color: #000;
}
div.tabs_content {
    width: 800px;
    margin-left: auto;
    margin-right : auto;
    border: 1px solid #ff3c14;
    clear: both;
}
div.tabs_content > div {
    background: white;
    padding: 20px;
    text-align: center;
}

div.front_recipe_search {
    margin: 0;
    padding: 20px 70px;
}

input.front_searchfield {
    width : 300px;
    margin: 0 auto;
    color: black;
    border-color:#009245;
    float:left;
}

input.front_recipename_searchfield {
    width : 500px;
    margin: 0 auto;
    color: black;
    border-color:#009245;
}

button.search {
    /* 文字サイズの指定 */
    font-size: 0.9em;
    /* 角丸の指定 */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 150px;
    height: 35px;
    color:white;
    background-color:#ff5f41;
    border-color:#ff5f41;
    float:left;
    margin-left: 5px;
    margin-right: 5px;
}

button.recipename_search {
    /* 文字サイズの指定 */
    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;
}

button.form_clear {
    /* 文字サイズの指定 */
    font-size: 0.9em;
    /* 角丸の指定 */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 150px;
    height: 35px;
    color: white;
    background-color:#a5a5a5;
    border-color:#a5a5a5;
    float:left;
}

button.form_clear_name {
    /* 文字サイズの指定 */
    font-size: 0.9em;
    /* 角丸の指定 */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 160px;
    height: 38px;
    color: white;
    background-color:#a5a5a5;
    border-color:#a5a5a5;
}

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

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

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • Dot

    2018/05/13 11:55

    コードがこちらと酷似してますね https://teratail.com/questions/75611リンク先の用に書くと解答しやすいですね

    キャンセル

  • science_mac

    2018/05/13 12:20

    ご指摘ありがとうございます。 メインのコンテンツ部分についても追記しました。 かなり長くなり見づらくなってしまい申し訳ありません。

    キャンセル

回答 1

checkベストアンサー

+2

デベロッパーツール(Chrome,IE,Firefoxを用いてF12)
javascriptコードをデバックしてみましょう

return false;を入れてどこでおかしくなってるか再リロードして見て
//を入れてコメントアウトしていきましょう

ひとつ消したら寄らなくなりました

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/13 12:54

    ありがとうございます。
    そちらの方法で確認してみたいと思います。

    ご指摘ありがとうございました。

    キャンセル

  • 2018/05/13 12:59

    あ Macは
    Opt + Cmd + I
    みたい

    キャンセル

  • 2018/05/13 13:03

    わざわざありがとうございます!

    キャンセル

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

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

関連した質問

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

  • PHP

    19148questions

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

  • JavaScript

    15231questions

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

  • jQuery

    6307questions

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

  • CSS

    5306questions

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