Q&A
ありがとうございます。
きゃーーーそもそもが間違っているのですね！？
モーダルウィンドウがクリックした画像の中央に来ないので、
後から付け出した部分でした。もう一度、別のやり方でやってみます。
課題でメニューページを作成。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; }); });
回答3件
0
問題は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点を修正することで望む動きが実現できます。
これでも画像が表示される位置がずれているようですがそれは自分で調整してください。
javascript
1$(function(){ 2 $("a").click(function(){ 3 $("body").append('<div id="bg">'); 4 $("body").append('<div id="photo">'); 5 6 $("#bg").hide(); 7 $("#photo").hide(); 8 9 $("#photo").html("<img>"); 10 11 $("#photo img").attr("src", $(this).attr("href")); 12 13 // $("#photo img").attr("width", 640); 14 $("#photo img").attr("height", 420); 15 $("#photo img").attr("alt", "photo"); 16 17 18 $("#bg").fadeIn(); 19 $("#photo").fadeIn(); 20 21 $("#bg").click(function(){ 22 $(this).fadeOut(function(){ 23 $(this).remove(); 24 }); 25 26 $("#photo").fadeOut(function(){ 27 $(this).remove(); 28 }); 29 }); 30 31 $(window).resize(); 32 33 return false; 34 }); 35 36 $(window).resize(modalResize); 37 function modalResize(){ 38 39 var w = $(window).width(); 40 var h = $(window).height(); 41 42 var x = (w - $("#bg").outerWidth(true)) / 2; 43 var y = (h - $("#photo").outerHeight(true)) / 2; 44 $("#photo").css({'left': x + 'px','top': y + 'px'}); 45 } 46});
投稿2017/03/27 08:41
総合スコア4524
0
$(window).resize(modalResize); が $("a").click(function(){}); の中で設定されているため、a要素がクリックされるたびにその関数が登録され、モーダルを閉じた後もリサイズのたびに関数が実行されるので、作り方を変えるほうがいいと思います。
また、関数modalResize はリサイズが起こるまで実行されないので、幅／高さの計算はそのときまでされませんね。
投稿2017/03/24 11:50
総合スコア69407
自分で作ることにこだわらない、というのも一つの手段だと思います。（スマホやレスポンシブに対応することを考えれば既にあるライブラリを使用するのも良いと思います）
【レスポンシブ対応された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」を持っていると宣言するのは不適切です。
0
とりあえずmodalResize関数内の$(bg).css({'left': x + 'px','top': y + 'px'});は$("#bg").css({'left': x + 'px','top': y + 'px'});の記述ミスですね。
投稿2017/03/24 05:30
総合スコア4524
返答ありがとうございます！！
"#bg"に直してみたのですが、、クリックした画面のwindowサイズの真ん中に来なかったです＞＜
上の方に画像が開いちゃって・・・
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/29 03:58
2017/03/29 04:18