I have called the js as shown as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="modal_style.css">
<script src="modal_js.js"></script>
<title>Modal Login Page</title>
</head>
<body>
<h1>Let's get started by</h1>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
My JavaScript file is as follows:
var modal = document.getElementById('id01');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Please help me to identify the error
make a div and put the login div inside it and onclick on the first div make the both div