デモ
See the Pen modal1 by logsuke (@design-list) on CodePen.
コード
<!-- Boxicons headタグ内へ -->
<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
<main>
<div id="overlay">
</div>
<div id="modal">
<img src="https://placehold.jp/3d4070/ffffff/1600x1400.png" alt="">
</div>
<section id="section1" class="section">
<button id="button" class="button">modal</button>
</section>
</main>
/*=== Base ===*/
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
:root {
--nav-height: 8rem;
--max-width: 1024px;
--container-padding: 0 4rem;
--gap: 2rem;
--bg-color: rgb(240, 240, 240);
--first-color: rgb(172, 245, 255);
}
/*=== Font ratio ===*/
html {
scroll-behavior: smooth;
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.section {
width: var(--max-width);
margin: 0 auto;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10rem;
}
/* tool tip */
.button {
width: 150px;
height: 50px;
padding: .5rem 1rem;
background: var(--first-color);
border: none;
font-size: 2rem;
border-radius: .5rem;
cursor: pointer;
position: relative;
}
/* modal */
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(39, 39, 39, 0.664);
z-index: 80;
pointer-events: none;
user-select: none;
opacity: 0;
transition: opacity .2s;
}
#overlay.show {
opacity: 1;
pointer-events: auto;
user-select: auto;
}
#modal {
width: 100%;
height: 100%;
max-width: 80%;
max-height: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
z-index: 100;
pointer-events: none;
user-select: none;
opacity: 0;
transition: opacity .2s;
}
#modal.show {
opacity: 1;
pointer-events: auto;
user-select: auto;
}
#modal img {
width: 100%;
height: 100%;
object-fit: contain;
}
/*=== Base ===*/
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
:root {
--nav-height: 8rem;
--max-width: 1024px;
--container-padding: 0 4rem;
--gap: 2rem;
--bg-color: rgb(240, 240, 240);
--first-color: rgb(172, 245, 255);
}
/*=== Font ratio ===*/
html {
scroll-behavior: smooth;
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.section {
width: var(--max-width);
margin: 0 auto;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10rem;
}
/* tool tip */
.button {
width: 150px;
height: 50px;
padding: .5rem 1rem;
background: var(--first-color);
border: none;
font-size: 2rem;
border-radius: .5rem;
cursor: pointer;
position: relative;
}
/* modal */
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(39, 39, 39, 0.664);
z-index: 80;
pointer-events: none;
user-select: none;
opacity: 0;
transition: opacity .2s;
}
#overlay.show {
opacity: 1;
pointer-events: auto;
user-select: auto;
}
#modal {
width: 100%;
height: 100%;
max-width: 80%;
max-height: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
z-index: 100;
pointer-events: none;
user-select: none;
opacity: 0;
transition: opacity .2s;
}
#modal.show {
opacity: 1;
pointer-events: auto;
user-select: auto;
}
#modal img {
width: 100%;
height: 100%;
object-fit: contain;
}