jQueryとCSSを使ってモーダルウィンドウ(プラグインなし)
ちょっとしたギャラリー的なのにその2。imgで見せると幅や高さが変わってしまったり、調節してもなんか微妙ーな感じになったりするので、背景として見せています。
しかも縦横比固定なのでレスポンシブにも。
jQuery
$(function() {
modalresize();
$('.modalOpen').on('click', function(){
var href = $(this).attr("href");
var modalimg = $(this).find('div').css('background-image').match(/https?:\/\/[-_.!~*'()a-zA-Z0-9;\/?:@&=+$,%#]+[a-z]/g);
$( href + " img").attr({src: modalimg});
$(href).fadeIn();
$(this).addClass("open");
return false;
});
$(".modalClose").on('click', function(){
$(this).parents(".modal").fadeOut();
$(".modalOpen").removeClass("open");
return false;
});
});
$(window).resize(function(){
modalresize();
});
function modalresize() {
var imgheight = $('.modallist > a').width() * 0.58;
$('.modallist > a > div').css({height: imgheight + 'px'});
}
CSS
.modallist .modal {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: 100;
display: none;
}
.modallist .m_overlay {
position: fixed;
top: 0;
left: 0;
background:rgba(0, 0, 0, 0.78);
width: 100%;
height: 100vh;
}
.modallist .modal .inner {
position: absolute;
z-index: 100;
max-width: 750px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 1rem;
background: #fff;
border: 5px solid #fff;
border-radius: 5px;
text-align: center;
}
.modallist .modal .inner img {
max-width: 700px;
height: auto;
}
.modallist .modal .inner .modalClose {
position: absolute;
right: 0;
bottom: -3rem;
color: #fff;
text-decoration: none;
font-size: 1.5rem;
}
.modallist {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
-flex-pack:justify;
-ms-flex-wrap:wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
margin: 1rem 0 4.5rem;
}
.modallist > a {
display: block;
width: 23%;
margin: 0 2.66% 2rem 0;
border: 1px solid #eee;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
transition: all 0.15s linear;
}
.modallist > a:nth-of-type(4n) {
margin-right: 0;
}
.modallist > a > div {
display: block;
width: 100%;
border: 1px solid #dddddd;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
}
HTML
<div class="modallist"> <a href="#modalbody" class="modalOpen"> <div style="background-image: url(http://memo.exp.jp/wp-content/uploads/2018/04/css-js-1.jpg);"></div> </a> <a href="#modalbody" class="modalOpen"> <div style="background-image: url(http://memo.exp.jp/wp-content/uploads/2018/02/css-1.jpg);"></div> </a> <a href="#modalbody" class="modalOpen"> <div style="background-image: url(http://memo.exp.jp/wp-content/uploads/2017/11/mic_mixer-1.jpg);"></div> </a> <a href="#modalbody" class="modalOpen"> <div style="background-image: url(http://memo.exp.jp/wp-content/uploads/2017/11/tablet_smartphone-1.jpg);"></div> </a> <a href="#modalbody" class="modalOpen"> <div style="background-image: url(http://memo.exp.jp/wp-content/uploads/2017/02/a16964955aee_s-1.jpg);"></div> </a> <div class="modal" id="modalbody"> <div class="m_overlay modalClose"></div> <div class="inner"> <img src="http://memo.exp.jp/wp-content/uploads/2018/04/css-js-1.jpg"> <a href="" class="modalClose">Close</a> </div> </div> </div>
