こんにちは、mito（@mito_works）です！
今回は、モーダルウィンドウの作り方と、モーダルウィンドウ表示時に親画面がページ上部に戻ってしまうときの対処法について書きます。
全体的な動き
以下の3ステップを実装していきます。
- リンクもしくはボタンを押す
- モーダルウィンドウが表示される
- 閉じるもしくは×を押すと閉じる
HTMLでの記載
モーダルウィンドウを作る。
<div class="modal-wrapper" id="map-modal">
<!-- モーダル全体の枠 -->
<div class="modal">
<!-- 右上に配置する×ボタン -->
<div class="close-modal">
<i class="fa fa-2x fa-times"></i>
</div>
<div class="modal-main">
<div class="picture">
<img src="images/map.jpg">
</div>
<div>
<p class="map-detail">詳しい地図の内容を記載する</p>
</div>
</div>
<!-- 閉じるボタン -->
<div class="closebutton">
<button class="close">閉じる</button>
</div>
</div>
</div>
モーダルウィンドウへの遷移元を作る。
<div>
<p class="mapinfo" href="">
<a class="mapinfo-show1">詳しい地図はこちら</a>
</p>
</div>
CSSでの記載
モーダルウィンドウの装飾部分を記載する。
.modal-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 100;
display: none;
}
.modal {
position: absolute;
top: 20%;
left: 24%;
background-color: #e6ecf0;
padding: 20px 20px 20px;
border-radius: 10px;
width: 650px;
height: auto;
}
.fa-times {
position: absolute;
top: 12px;
right: 12px;
color: rgba(128, 128, 128, 0.46);
cursor: pointer;
}
.closebutton{
text-align:center;
margin-top:10px;
}
.close {
display: inline-block;
padding: 10px 140px;
background-color: #0091a7;
border: none;
border-radius: 3px;
color: white;
margin: 10px auto;
cursor: pointer;
}JavaScriptでの記載
モーダルウィンドウを開くときの制御を作る。
POINT!!
モーダルウィンドウを開いたときの親画面の位置を記憶しておく。
//グローバル変数
var sX_syncerModal = 0 ;
var sY_syncerModal = 0 ;
function scrollposition(){
//スクロール位置を記録する
var dElm = document.documentElement , dBody = document.body;
sX_syncerModal = dElm.scrollLeft || dBody.scrollLeft; //現在位置のX座標
sY_syncerModal = dElm.scrollTop || dBody.scrollTop; //現在位置のY座標
}
momo
この記載をして、位置をずらさないように制御しないと、モーダルウィンドウを閉じる時に親画面のトップに戻ってしまうよ。
モーダルウィンドウを表示するためにクリックされた時の制御を作る
$(function() {
// モーダル表示を行うclickイベント
$('.mapinfo-show1').click(function(){
scrollposition();
$('#map-modal').fadeIn();
});
});
モーダルウィンドウを閉じる時の制御を作る
//「Close」ボタンクリックした際に閉じる処理
$('.close').on('click', function() {
//スクロール位置を戻す
window.scrollTo( sX_syncerModal , sY_syncerModal );
$('#map-modal').fadeOut();
});
//×ボタンをクリックした際に閉じる処理
$('.close-modal').click(function(){
window.scrollTo( sX_syncerModal , sY_syncerModal );
$('#map-modal').fadeOut();
});
mito
これでモーダルウィンドウを閉じると親画面の元の位置に戻ります。
まとめ
- モーダルウインドウを開くときに親画面の表示位置を取得しておくこと。
- モーダルウィンドウへの遷移後、親画面へ戻る際に取得位置を記載すること。
- リンクでモーダルウィンドウへ遷移する際、HTMLのaタグhrefは書かない。
mito
href=””を残していて、モーダルウィンドウへ遷移した際にページ上部に戻ってしまい、悩みました。
momo
hrefを消してしまうと、デフォルト設定のカーソルや下線などはなくなるのでCSSで設定する必要があるよ。
a.mapinfo-show1{
color: #0091a7;
text-decoration: underline;
cursor: pointer;
}
ーEndー
ABOUT ME
