雛形コード
雛形コードです。git clone もしくは、コピペして利用してください。
Last updated
雛形コードです。git clone もしくは、コピペして利用してください。
Last updated
git clone -b starter-vue https://github.com/if-tech-support/modal.git<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div class="container" id="app">
<h1 class="container__title">ボタンを押すとモーダルが開きます。</h1>
<button class="container__btn">表示</button>
<!-- モーダルの中身 -->
<div class="modal">
<div class="modal__inner">
<p class="modal__header">タイトル</p>
<div class="modal__body">
モーダルを表示しています。
</div>
<div class="modal__footer">
<button class="modal__btn">閉じる</button>
</div>
</div>
<!-- モーダルが開いた時の背景色 -->
<div class="modal__bg"></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>.container {
text-align: center;
}
.container__title {
font-size: 24px;
margin-top: 50px;
}
.container__btn {
font-size: 18px;
padding: 3px 10px;
cursor: pointer;
}
.modal__inner {
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
background-color: #fff;
border-radius: 6px;
z-index: 3;
}
.modal__header {
font-size: 24px;
font-weight: bold;
padding: 10px 15px;
margin: 0;
background-color: #f4f5f6;
border-bottom: 1px solid #d1d1d1;
}
.modal__body {
font-size: 24px;
margin: 0;
padding: 50px 0;
}
.modal__footer {
border-top: 1px solid #d1d1d1;
padding: 10px;
text-align: right;
}
.modal__btn {
margin-right: 10px;
cursor: pointer;
}
.modal__bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}