<!-- モーダルウィンドウを開くボタン -->
<div id="modal-open" class="modal__open">モーダルを開く</div>
<!-- モーダルウィンドウが開いた時の背景 -->
<div id="modal-visible" class="modal__background">
<div id="modal-body" class="modal__body">
<!-- モーダルウィンドウを閉じるボタン -->
<div id="modal-close" class="modal__close">
<div class="modal__icon"></div>
</div>
<div class="modal__content">
<p>ここはモーダルが開いた時に表示するテキストです。文字数が多くて画面からはみ出るときはスクロールするように調整しています。ここはモーダルが開いた時に表示するテキストです。文字数が多くて画面からはみ出るときはスクロールするように調整しています。ここはモーダルが開いた時に表示するテキストです。文字数が多くて画面からはみ出るときはスクロールするように調整しています。ここはモーダルが開いた時に表示するテキストです。文字数が多くて画面からはみ出るときはスクロールするように調整しています。ここはモーダルが開いた時に表示するテキストです。文字数が多くて画面からはみ出るときはスクロールするように調整しています。ここはモーダルが開いた時に表示するテキストです。文字数が多くて画面からはみ出るときはスクロールするように調整しています。ここはモーダルが開いた時に表示するテキストです。文字数が多くて画面からはみ出るときはスクロールするように調整しています。</p>
</div>
</div>
</div>/* リセットCSS */
*,
*::before,
*::after {
box-sizing: border-box;
}
p {
margin: 0;
}
.modal__open {
/* ボタン位置の調整 */
position: fixed;
top: calc(50% - 60px / 2);
left: 50%;
transform: translate(-50%);
/* ボタン位置の調整 */
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 60px;
background: #5CC0EF;
font-size: 16px;
font-weight: bold;
color: #fff;
border: 2px solid #5CC0EF;
transition: 0.3s;
&:hover {
background-color: #fff;
color: #5CC0EF;
}
}
.modal__background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 50px 20px;
opacity: 0;
background: rgba(0, 0, 0, 50%);
visibility: hidden;
transition: 0.3s;
}
.visible {
opacity: 1;
visibility: visible;
}
.modal__body {
position: relative;
max-width: 500px;
max-height: 100%;
width: calc(100% - 20px * 2);
overflow: auto;
}
/*モーダルを閉じるボタンの指定*/
.modal__close {
position: absolute;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
cursor: pointer;
}
.modal__icon {
position: relative;
width: 100%;
height: 100%;
&::before {
content: "";
position: absolute;
top: 50%;
left: 0px;
transform: rotate(45deg);
width: 100%;
height: 3px;
background-color: #000;
}
&::after {
content: "";
position: absolute;
top: 50%;
left: 0px;
transform: rotate(-45deg);
width: 100%;
height: 3px;
background-color: #000;
}
}
.modal__content {
background: #fff;
color: #000;
text-align: left;
padding: 30px;
}$(function(){
// 変数に要素を入れる
var modal_open = $('#modal-open'),
close = $('#modal-close'),
container = $('#modal-visible');
// ボタンをクリックしたらモーダルを表示する
modal_open.on('click',function(){
container.addClass('visible');
return false;
});
// アイコンをクリックしたらモーダルを閉じる
close.on('click',function(){
container.removeClass('visible');
});
// モーダルの外側をクリックしたらモーダルを閉じる
$(document).on('click', e => {
if (!$(e.target).closest('#modal-body').length) {
container.removeClass('visible');
}
});
});
External CSS
This Pen doesn't use any external CSS resources.