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

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

ただいまの
回答率

90.52%

  • jQuery

    6703questions

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

モーダルウィンドウ画面が中央に出てこない><件

受付中

回答 3

投稿

  • 評価
  • クリップ 2
  • VIEW 2,304

labanda

score 8

課題でメニューページを作成。jQueryでモーダルウィンドウの画像が一番上に出るようにはなったのですが、
クリックしたウィンドウズサイズの中央に表示してくれないです。
どうすればよいのか、教えて頂けると助かります。
宜しくお願い致します。!!

[Html]
<doctype html>
<html class="export" lang="jp">
<head>
  <meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="../css/menu.css" media="screen">
  <script src="../js/jquery-2.1.4.min.js"></script>
  <script src="../js/menu.js"></script>

  <title>メニュー</title>
</head>
<body>
  <header>
    <div id="toplogo"><img src="../img/logo.svg"></div>
    <nav>
      <button>
        <img src="../img/mobileBtn.png" width="60" height="60">
      </button>
      <ul>
        <a href="#"><li><i class="fa fa-fw fa-flag"></i> トップ</li></a>
        <a href="../concept/index.html"><li><i class="fa fa-fw fa-book"></i> こだわり</li></a>
        <a href="../menu/index.html"><li><i class="fa fa-fw fa-cutlery"></i> メニュー</li></a>
        <a href="../blog/index.html"><li><i class="fa fa-fw fa-comment"></i> スタッフブログ</li></a>
        <a href="../access/index.html"><li><i class="fa fa-fw fa-taxi"></i> アクセス</li></a>
        <a href="../reservation/index.html"><li><i class="fa fa-fw fa-pencil-square-o"></i> ご予約</li></a>
        <li id="closeMenu">閉じる</li>
     </ul>
    </nav>
  </header>

<div id="wrapper">
  <article>
    <h1>メニュー</h1>
    <section class="menu_choose">
      <figure>
        <a href="#coursemenu"><img src="../img/mtop_course.jpg" alt="Link course"></a>
        <figcaption>
          <p>Courses</p>
        </figcaption>
      </figure>
      <figure>
        <a href="#lunchset"><img src="../img/mtop_lunch.jpg" alt="Link lunch"></a>
        <figcaption>
          <p>Lunch set</p>
        </figcaption>
      </figure>
      <figure>
        <a href="#foods"><img src="../img/mtop_food.jpg" alt="Link food"></a>
        <figcaption>
          <p>Foods</p>
        </figcaption>
      </figure>
      <figure>
        <a href="#"><img src="../img/mtop_dessert.jpg" alt="Link dessert"></a>
        <figcaption>
          <p>Desserts</p>
        </figcaption>
      </figure>
      <figure>
        <a href="#"><img src="../img/mtop_drink.jpg" alt="Link drink"></a>
        <figcaption>
          <p>Drinks</p>
        </figcaption>
      </figure>
   </section>

   <section id="coursemenu">
     <h2>松喜屋 匠コース</h2>
       <h3>■ 松喜屋 匠コースA(全8品)4,000円<span>(1人前、税別)※2人前より<san></h3>
         <div class="flex_menu">
          <p> ・先付 本日の先付け<br>
              ・造り 鮮魚四種(赤身、イカ、サーモン、鯖)<br>
           ・水菓子 抹茶杏仁豆腐<br></p>

          <div class="big">
           <a href="../img/allergy_01.png"><img src="../img/mcourse_01.jpg" alt="course A"></a>
          </div>
       </div>
       <h3>■ 松喜屋 匠コースB(全9品)4,500円<span>(1人前、税別)※2人前より<san></h3>
         <div class="flex_menu">
          <p>・前菜 春の食材五点盛り<br>
             ・吸い物 あいなめくず打ち わらび 玉子豆腐 梅肉<br> 
             ・水菓子 抹茶杏仁豆腐<br></p>
       <div class="big">
       <a href="../img/allergy_02.png"><img src="../img/mcourse_02.jpg" alt="course B"></a>
     </div>
       </div>
       <h3>■ 松喜屋 匠コースC(全10品)5,000円<span>(1人前、税別)※2人前より<san></h3>
         <div class="flex_menu">
          <p>・前菜 春の食材五点盛り<br>
            ・吸い物 あいなめくず打ち わらび 玉子豆腐 梅肉<br>      
            ・水菓子 季節のフルーツ<br></p>
      <div class="big">
       <a href="../img/allergy_03.png"><img src="../img/mcourse_03.jpg" alt="course C"></a>
     </div>
   </div>
    </section><br>
   <section id="lunchset">
     <h2>松喜屋 ランチセット</h2>
     <div class="flex_menu">
       <figure>
         <a href="#"><img src="../img/mlunch_01.jpg" alt="ヘルシー御膳ランチA"></a>
         <figcaption>
           <p>ヘルシー御膳ランチA:2000円(税込)</p>
         </figcaption>
       </figure>
       <figure>
         <a href="#"><img src="../img/mlunch_02.jpg" alt="ヘルシー御膳ランチB"></a>
         <figcaption>
           <p>ヘルシー御膳ランチB:1800円(税込)</p>
         </figcaption>
       </figure>
       <figure>
         <a href="#"><img src="../img/mlunch_03.jpg" alt="天麩羅尽くし定食"></a>
         <figcaption>
           <p>天麩羅尽くし定食:2000円(税込)</p>
         </figcaption>
       </figure>

   </section>


     </div>
   </section>


  <p id="page-top"><a href="#wrap">PAGE TOP</a></p>
</div><!-- #wrapper -->
<footer>
  Copyright@2007-2015 松喜屋 All Rights Reserved
</footer>
<script src="../js/style.js"></script>

</body>
</html>
[css]

@charset "UTF-8";
@import "compass";
@import "base";


/*=================  COMMON  =================*/

figcaption{
    font-weight: bold;
    font-size:1.6rem;
    color:$mainColor;
    span{
        font-weight: normal;
        color:#999;
        font-size:1.2rem;
    }
}

article.topInview{
        overflow: hidden;
        section{
            transition: .8s;
        }
        .list-mv{
          opacity: 0;
          transform: translate(0,60px);
          -webkit-transform: translate(0,60px);
        }
        .mv{
          opacity: 1.0;
          transform: translate(0,0);
          -webkit-transform: translate(0,0);
        }
}

/*================  MOBILE  =================*/

@media screen and (max-width: 768px) {
  article {
    background-color: #fff;
  }
}


/*===================  PC  ===================*/

@media screen and (min-width: 768px) {
  article {
    background-color: #fff;
  }
}



/*===================  PC  ===================*/


@media screen and (min-width: 768px){
    #firstview{
        background: url(../img/bgDammy.jpg)repeat-x;
        background-position: 0 50px;
        margin:0 0 40px 0;
        border-bottom:1px solid $mainColor;
        >figure{
            width:$contentWidth;
            margin:0 auto 0;
        //        width:100%;
                height: calc(100vh - 180px);
                overflow: hidden;
                position: relative;
            img{
                min-width:calc(100vw * 0.5);
                min-height:calc(100vw * 0.275);

            }
            figcaption{
                background-color: #fff;
                position: absolute;
                bottom:0;
                left:0;
                width: 100%;
                height: calc(15vh);
                padding:20px 20px;
                }
        }
    }
    article.topInview{
        section{
             margin: 0 0 40px 0;
            &::after{
                @include clearFix;
            }
             img{
                 float:left;
                 margin:0 50px 0 0;
             }
             >div{
                 float:left;
                 width:450px;
                 p{
                     margin:0 0 15px 0;
                 }
                 .btn{
                     color:#fff;
                     background-color:$mainColor;
                     margin:20px 0 0 0;
                     @include btn01;
                 }
             }

        }
    }

}

/*------  eunju ------*/
.menu_choose {
  display: flex;
  text-align: center;
    margin-top: 40px;
}
.menu_choose figure img {
  padding: 5px 20px;
}
#coursemenu h2, #lunchset h2, #foods h2, #desserts h2, #drinks h2 {
    border-top: 1px solid #b55233;
    border-bottom: 1px solid #F4971D;
    /*border: 1px solid #F4971D;*/
    text-align: center;
    padding: 6px;
    box-shadow: 0 5px 6px -6px #583822;
    margin: 35px 0;
}
#coursemenu h3 {
    color: #F4971D;
    margin: 35px 64px 20px;
}
#coursemenu h3 span {
    font-style: normal;
    font-size: 1.5rem;
}
/*section.menu_choose figcaption p:nth-of-type(1){
    border-bottom: 4px solid #c80000;
}*/
.flex_menu {
    display: flex;
    justify-content: space-around;
}
#lunchset .flex_menu, #foods .flex_menu, #desserts .flex_menu, #drinks .flex_menu {
    flex-wrap: wrap;
}
#lunchset .flex_menu img{
        width: 95%;
}
#lunchset p, #foods p, #desserts p, #desserts p, #drinks p {
    font-size: 1.5rem;
    margin: 5px 5px 15px;
}
#foods .flex_menu img, #desserts .flex_menu img, #drinks .flex_menu img{
    width: 80%;
}
#coursemenu .flex_menu P, #foods .flex_menu p {
    line-height: 2.6rem;
}
figcaption p span {
    color: red;
}

/*---------ここから---------*/


.big{
    /*float:left;*/
    list-style-type:none;
    /*margin:50px;*/
    /*height:420px;*/
    /*margin:0 auto;
    display:block;*/
}

.big:last-child{
    margin-right:0;
}
#bg{
    position:fixed;
    left:0;
    top:0;
    height:100%;
    width:100%;
    background: rgb(219, 184, 92);
    opacity: 0.7;
}

#photo{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
 text-align: center;
    height:420px;
}
[js]
$(function(){
 $("a").click(function(){
   $("body").append('<div id="bg">');
   $("body").append('<div id="photo">');

   $("#bg").hide();
   $("#photo").hide();

   $("#photo").html("<img>");

   $("#photo img").attr("src", $(this).attr("href"));

  //  $("#photo img").attr("width", 640);
   $("#photo img").attr("height", 420);
   $("#photo img").attr("alt", "photo");


   $("#bg").fadeIn();
   $("#photo").fadeIn();

   $("#bg").click(function(){
     $(this).fadeOut(function(){
       $(this).remove();
     });

     $("#photo").fadeOut(function(){
       $(this).remove();
     });
   });

   $(window).resize(modalResize);
         function modalResize(){

             var w = $(window).width();
             var h = $(window).height();

             var x = (w - $("#bg").outerWidth(true)) / 2;
             var y = (h - $("#photo").outerHeight(true)) / 2;
             $(bg).css({'left': x + 'px','top': y + 'px'});
         }
   return false;
 });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

+2

問題は2点あります。

1点目は$(window).resize(関数);リサイズ時の処理を設定する命令であり、リサイズ時の処理を実行する命令ではないということです。リサイズ時の処理を設定するだけでは、実際にリサイズが発生するまでは何も起きません。$(window).resize(関数);でリサイズ時の処理を設定した上で、$(window).resize();リサイズ時の処理を実行する必要があります。

2点目は$(bg).css({'left': x + 'px','top': y + 'px'});です。
以前の回答でも指摘しましたが、まずセレクタに未定義の変数bgを指定してしまっています。またここで表示位置を変更したい要素は背景を半透明で覆っているbg要素ではなく、画像を表示しているphoto要素のはずです。ですから$("#photo").css({'left': x + 'px','top': y + 'px'});と書く必要があります。

以上2点を修正することで望む動きが実現できます。
これでも画像が表示される位置がずれているようですがそれは自分で調整してください。

$(function(){
 $("a").click(function(){
   $("body").append('<div id="bg">');
   $("body").append('<div id="photo">');

   $("#bg").hide();
   $("#photo").hide();

   $("#photo").html("<img>");

   $("#photo img").attr("src", $(this).attr("href"));

  //  $("#photo img").attr("width", 640);
   $("#photo img").attr("height", 420);
   $("#photo img").attr("alt", "photo");


   $("#bg").fadeIn();
   $("#photo").fadeIn();

   $("#bg").click(function(){
     $(this).fadeOut(function(){
       $(this).remove();
     });

     $("#photo").fadeOut(function(){
       $(this).remove();
     });
   });

   $(window).resize();

   return false;
 });

 $(window).resize(modalResize);
         function modalResize(){

             var w = $(window).width();
             var h = $(window).height();

             var x = (w - $("#bg").outerWidth(true)) / 2;
             var y = (h - $("#photo").outerHeight(true)) / 2;
             $("#photo").css({'left': x + 'px','top': y + 'px'});
         }
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/29 12:58

    ありがとうございます。修正してみたのですが、
    中央には配置出来ませんでした。CSSを含めて再度見てみます。

    キャンセル

  • 2017/03/29 13:18

    CSSを弄って中央に来るようになりました!!
    ありがとうございます!!!助かりました。

    キャンセル

+1

とりあえずmodalResize関数内の$(bg).css({'left': x + 'px','top': y + 'px'});$("#bg").css({'left': x + 'px','top': y + 'px'});の記述ミスですね。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/24 20:30

    返答ありがとうございます!!
    "#bg"に直してみたのですが、、クリックした画面のwindowサイズの真ん中に来なかったです><
    上の方に画像が開いちゃって・・・

    キャンセル

+1

$(window).resize(modalResize); が $("a").click(function(){}); の中で設定されているため、a要素がクリックされるたびにその関数が登録され、モーダルを閉じた後もリサイズのたびに関数が実行されるので、作り方を変えるほうがいいと思います。

また、関数modalResize はリサイズが起こるまで実行されないので、幅/高さの計算はそのときまでされませんね。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/29 13:01

    ありがとうございます。
    きゃーーーそもそもが間違っているのですね!?
    モーダルウィンドウがクリックした画像の中央に来ないので、
    後から付け出した部分でした。もう一度、別のやり方でやってみます。

    キャンセル

  • 2017/03/29 13:32

    自分で作ることにこだわらない、というのも一つの手段だと思います。(スマホやレスポンシブに対応することを考えれば既にあるライブラリを使用するのも良いと思います)

    【レスポンシブ対応されたLightbox系プラグイン・ライブラリ 10 | NxWorld】
    http://www.nxworld.net/tips/10-responsive-lightbox-plugin-and-library.html

    【Lightbox最新版(2.7.1)の設置方法と使い方 - アイデアハッカー】
    http://ideahacker.net/2015/02/07/9680/

    また、課題であるなら実在の社名を使うのはやめたほうが良いです。「Copyright」を持っていると宣言するのは不適切です。

    キャンセル

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

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

関連した質問

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

  • jQuery

    6703questions

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