実現したいこと
ボタンをクリックしたらモーダルウィンドウが表示されて、どこかクリックしたらモーダルを閉じたい
発生している問題・エラーメッセージ
クリックしてもモーダルが閉じない
該当のソースコード
html
12<!DOCTYPE HTML>3<html>4<head>5 <meta charset="UTF-8" />6 <meta content="IE=edge" http-equiv="X-UA-Compatible" />7 <link href="css/css.css" rel="stylesheet" />8 <script src="js/js.js" type="text/javascript" ></script>9</head>10<body>11 <input type="submit" onclick='Display()' value="OK" />12</body>13</style>14</html>15
css
12.overlay {3 width:100%;4 height:100%;5 display: none;6 position: fixed;7 background-color: rgba(0, 0, 0, 0.5);8 top: 0;9 left: 0;10 z-index: 1;11}12
JavaScript
12function Display() {3 4 const overlay = document.createElement('div');5 overlay.classList.add('overlay');6 overlay.style.display = "block";7 document.body.appendChild(overlay);8 9 var colse = function(){10 if (overlay.addEventListener) {11 overlay.addEventListener('click',closeModalWindow(overlay),false);12 } else if (overlay.attachEvent) {13 overlay.attachEvent('onclick',closeModalWindow(overlay));14 }15 }16}17
試したこと
JavaScriptのソースを書き換える
var colse = function(){
if (overlay.addEventListener) {
overlay.addEventListener('click',closeModalWindow(overlay),false);
} else if (overlay.attachEvent) {
overlay.attachEvent('onclick',closeModalWindow(overlay));
}
の部分が違うと考えています。
if (overlay.addEventListener) { overlay.addEventListener('click',closeModalWindow(overlay),false); } else if (overlay.attachEvent) { overlay.attachEvent('onclick',closeModalWindow(overlay));
この記述に直したら、モーダル自体が表示されなくなりました。
0 コメント