Pop-up box not opening
Question
I'm trying to get a pop-up box open upon clicking on a link...I found this solution: http://jsfiddle.net/loktar/rxGmk/ and applied it, however I'm failing to get the popup to open. The below code is part of a frameset. I used the same CSS. PS: the jsfiddle is working.
Code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="custom.css">
<script>
var opener = document.getElementById("opener");
opener.onclick = function(){
var lightbox = document.getElementById("lightbox"),
dimmer = document.createElement("div");
dimmer.style.width = window.innerWidth + 'px';
dimmer.style.height = window.innerHeight + 'px';
dimmer.className = 'dimmer';
dimmer.onclick = function(){
document.body.removeChild(this);
lightbox.style.visibility = 'hidden';
}
document.body.appendChild(dimmer);
lightbox.style.visibility = 'visible';
lightbox.style.top = window.innerHeight/2 - 50 + 'px';
lightbox.style.left = window.innerWidth/2 - 100 + 'px';
return false;
}
</script>
</HEAD>
<body>
<div id="lightbox">Testing out the lightbox</div>
<a href="#" id="opener">Click me</a>
</body>
</HTML>
2 answers
solution1
2 ACCPTED 2015-09-14 18:57:12
Please be friends with 'Inspect Element' like developer tools. In the console, it used to say your error
Uncaught TypeError: Cannot set property 'onclick' of null
It's because you are calling document.getElementById("opener"); in your while your opener element is in the body.
Your script will be loaded when the document is loaded BEFORE body tag.
Make sure you have your script after where your opener is.
<!DOCTYPE html>
<html>
<head>
<!-- you can replace with your link to css file -->
<style>
#lightbox{
visibility:hidden;
position:absolute;
background:red;
border:2px solid #3c3c3c;
color:white;
z-index:100;
width: 200px;
height:100px;
padding:20px;
}
.dimmer{
background: #000;
position: absolute;
opacity: .5;
top: 0;
z-index:99;
}
</style>
</head>
<body>
<div id="lightbox">Testing out the lightbox</div>
<a href="#" id="opener">Click me</a>
<!-- script is added after id="opener" is defined -->
<script>
var opener = document.getElementById("opener");
opener.onclick = function(){
var lightbox = document.getElementById("lightbox"),
dimmer = document.createElement("div");
dimmer.style.width = window.innerWidth + 'px';
dimmer.style.height = window.innerHeight + 'px';
dimmer.className = 'dimmer';
dimmer.onclick = function(){
document.body.removeChild(this);
lightbox.style.visibility = 'hidden';
}
document.body.appendChild(dimmer);
lightbox.style.visibility = 'visible';
lightbox.style.top = window.innerHeight/2 - 50 + 'px';
lightbox.style.left = window.innerWidth/2 - 100 + 'px';
return false;
}
</script>
</body>
</html>
In general, I define any javascript at the end of the <body> tag because it is one of the optimization strategies to improve initial loading speed of the website.
solution2
0 2015-09-14 18:41:04
Your code is missing something in your code that the jsFiddle does. By default, it wraps the code in the JavaScript window into a window.onload event handler. Because your code does not do this, your JavaScript runs before your opener link is created, so the click handler doesn't get applied. To fix this, put your JavaScript in a window.onload handler like the jsFiddle does for you:
window.addEventListener('load', function() {
var opener = document.getElementById("opener");
opener.onclick = function(){
var lightbox = document.getElementById("lightbox"),
dimmer = document.createElement("div");
dimmer.style.width = window.innerWidth + 'px';
dimmer.style.height = window.innerHeight + 'px';
dimmer.className = 'dimmer';
dimmer.onclick = function(){
document.body.removeChild(this);
lightbox.style.visibility = 'hidden';
}
document.body.appendChild(dimmer);
lightbox.style.visibility = 'visible';
lightbox.style.top = window.innerHeight/2 - 50 + 'px';
lightbox.style.left = window.innerWidth/2 - 100 + 'px';
return false;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.