Skip to content

Instantly share code, notes, and snippets.

@dynamic75

dynamic75/index.html

Forked from anonymous/index.html
Created April 22, 2016 21:34
Show Gist options
  • Save dynamic75/c4deda60d6ce7ccf31fb753147ad5f81 to your computer and use it in GitHub Desktop.
Save dynamic75/c4deda60d6ce7ccf31fb753147ad5f81 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/tebucibuke
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
body{
background-color: #222;
color: #777;
}
.content {
margin: 20px 0;
}
button{
padding: 10px;
}
.modal{
display: none;
position: fixed;
top: 50%;
left: 50%;
right: 0;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
box-sizing: border-box;
padding: 20px;
border: 1px solid #ccc;
color: #000;
background-color: rgba(202,249,255,.75);
}
</style>
</head>
<body id="body-1">
<div class="modal" id="modal-1">I'm a modal window</div>
<div class="content">
<button>open modal</button>
<p id="p-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet libero nec tellus sollicitudin maximus. Nulla eget ligula erat. Cras vulputate leo eget pretium finibus. Nulla elementum sit amet purus vel bibendum. In fermentum velit ut sollicitudin sagittis. Sed imperdiet congue nisi eget congue. Vivamus scelerisque quis leo non porta. Phasellus sed quam erat. In dictum cursus ex, a imperdiet tortor cursus non. Morbi sed lacus varius orci porta sollicitudin.
</p>
<p id="p-2">
Pellentesque pharetra auctor convallis. Donec sed tincidunt lectus. Duis porta mi vitae mi pellentesque placerat. In rhoncus maximus semper. Maecenas sit amet justo bibendum odio vehicula mollis. Phasellus eleifend commodo massa, sit amet tincidunt purus pellentesque sed. Nam finibus eget tortor a pellentesque. Curabitur posuere porttitor nisl, id fermentum nunc ornare eget. Suspendisse quis lobortis ligula.
</p>
<p id="p-3">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla viverra orci a tristique lacinia. Sed in vehicula neque. Aenean aliquet magna eu purus posuere sodales. Proin gravida rutrum iaculis. Maecenas ac diam est. Nunc quis sapien nec orci sagittis mollis. Nullam facilisis sed orci eu egestas. In cursus iaculis mi. Suspendisse potenti. Vestibulum at sem fringilla urna mollis scelerisque quis sed nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse tincidunt eros tristique blandit semper. Nullam ullamcorper tellus felis, sed consequat magna ultrices ac.
</p>
<p id="p-4">
Aliquam ullamcorper ex a est egestas luctus. Curabitur at mauris sem. Aliquam nec lacus nec lacus faucibus consequat et vitae ligula. Pellentesque non lectus id nulla pretium facilisis pellentesque id ligula. Integer in hendrerit orci. Integer pulvinar massa eget ante faucibus, non mattis quam varius. Vivamus ullamcorper turpis a egestas tempus. Etiam elementum eleifend tellus, ac tempor eros tempor quis. In tincidunt nec quam dictum tincidunt. Mauris eleifend velit magna, a finibus nisi fringilla quis. Praesent euismod orci ac lectus venenatis, gravida efficitur nisi blandit. Phasellus blandit tempus mollis. Donec non facilisis ex.
</p>
<p id="p-5">
Suspendisse tincidunt cursus lacus at venenatis. Phasellus pellentesque volutpat tortor. Integer et nisi non leo rutrum vestibulum. Donec in mollis augue. Fusce ullamcorper risus ut sapien sollicitudin, nec congue dolor blandit. Nullam nec finibus erat. Proin venenatis leo quis maximus dapibus. Cras imperdiet, lacus ut rutrum bibendum, magna lorem varius lectus, blandit congue nulla libero et urna. Praesent eros diam, accumsan non enim non, tempus finibus sapien. Praesent euismod eu nulla eget vulputate. Mauris auctor blandit neque, vel commodo turpis mollis vel. Vivamus porta sagittis nisl eu efficitur. Sed a vestibulum nibh, id lacinia magna. Phasellus sed accumsan erat. Vestibulum a nulla et mi vestibulum suscipit. Curabitur porttitor massa felis, in convallis nunc maximus et.
</p>
</div>
<script id="jsbin-javascript">
var modal = document.querySelector(".modal");
var pTags = document.querySelectorAll("p");
var body = document.getElementsByTagName("body")[0];
var button = document.querySelector("button");
button.addEventListener("click", function(e){
modal.style.display = "block";
console.log(modal.style.display);
});
Array.prototype.forEach.call(pTags,function(p){
p.addEventListener("click", showParent);
});
modal.addEventListener("click", showParent);
//body.addEventListener("click", showParent);
function showParent(e){
var id = e.target.id;
var parent = e.target.parentNode;
console.log(id);
console.log(parent);
if(id == "modal-1" && parent.nodeName.toLowerCase() == "body"){
console.log("you have clicked on the modal");
}
}
</script>
<script id="jsbin-source-css" type="text/css">body{
background-color: #222;
color: #777;
}
.content {
margin: 20px 0;
}
button{
padding: 10px;
}
.modal{
display: none;
position: fixed;
top: 50%;
left: 50%;
right: 0;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
box-sizing: border-box;
padding: 20px;
border: 1px solid #ccc;
color: #000;
background-color: rgba(202,249,255,.75);
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var modal = document.querySelector(".modal");
var pTags = document.querySelectorAll("p");
var body = document.getElementsByTagName("body")[0];
var button = document.querySelector("button");
button.addEventListener("click", function(e){
modal.style.display = "block";
console.log(modal.style.display);
});
Array.prototype.forEach.call(pTags,function(p){
p.addEventListener("click", showParent);
});
modal.addEventListener("click", showParent);
//body.addEventListener("click", showParent);
function showParent(e){
var id = e.target.id;
var parent = e.target.parentNode;
console.log(id);
console.log(parent);
if(id == "modal-1" && parent.nodeName.toLowerCase() == "body"){
console.log("you have clicked on the modal");
}
}
</script></body>
</html>
Raw
jsbin.tebucibuke.css
body{
background-color: #222;
color: #777;
}
.content {
margin: 20px 0;
}
button{
padding: 10px;
}
.modal{
display: none;
position: fixed;
top: 50%;
left: 50%;
right: 0;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
box-sizing: border-box;
padding: 20px;
border: 1px solid #ccc;
color: #000;
background-color: rgba(202,249,255,.75);
}
Raw
jsbin.tebucibuke.js
var modal = document.querySelector(".modal");
var pTags = document.querySelectorAll("p");
var body = document.getElementsByTagName("body")[0];
var button = document.querySelector("button");
button.addEventListener("click", function(e){
modal.style.display = "block";
console.log(modal.style.display);
});
Array.prototype.forEach.call(pTags,function(p){
p.addEventListener("click", showParent);
});
modal.addEventListener("click", showParent);
//body.addEventListener("click", showParent);
function showParent(e){
var id = e.target.id;
var parent = e.target.parentNode;
console.log(id);
console.log(parent);
if(id == "modal-1" && parent.nodeName.toLowerCase() == "body"){
console.log("you have clicked on the modal");
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment