html、css、javascript でmodalを作っているのですが、表示されなくて困っています
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Login-mordal</title> <link rel="stylesheet" href="main.css"> </head> <body> <main> <button id="login">ログイン</button> </main> <div class="mordal-wrapper" id="mordal"> <div class="mordal-menu"> <h1 class="title">ログイン</h1> <input type="text" placeholder="メールアドレス"> <input type="password" placeholder="パスワード"> <span class="css-cansel" id="cansel"></span> </div> </div> <script src="main.js"></script> </body> </html>css
main {
text-align: center;
z-index: 1;
}
button {
position: relative;
top: 100px;
width: 200px;
height: 80px;
background-color: red;
cursor: pointer;
}
.mordal-wrapper {
z-index: 2;
text-align: center;
position: absolute;
top: 290px;
left: 500px;
background-color: gray;
height: 260px;
width: 440px;
border-radius: 10px;
line-height: 40px;
display: none;
}
input {
display: block;
height: 30px;
width: 330px;
position: relative;
left: 50px;
margin-bottom: 40px;
}
.css-cansel {
display: inline-block;
position: relative;
top: -220px;
left: 195px;
width: 4px;
height: 20px;
background-color: #000;
transform: rotate(45deg);
}
.css-cansel::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: -8px;
width: 20px;
height: 4px;
margin-top: -2px;
background-color: #000;
}
.mordal-menu {
z-index: 3;
}
.mordal-wrapper.open {
transition-delay: 0s;
opacity: 1;
visibility: visible;;
}
javascript
var login = document.getElementById('login')
var mordal = document.getElementById('mordal')
var closing = document.getElementById('cansel')
login.addEventListener('click' function() {
mordal.classlist.add('open');
})
closing.addEventListener('click' function() {
mordal.classlist.remove('open')
})
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/06 08:20
2019/06/06 08:23
2019/06/06 08:26
2019/06/06 08:33