Cannot Bring Modal to Front - javascript

I have a problem where the Modal Bootstrap doesn't go to the front of the modal backdrop. As shown in the Code snippet, when the user presses "Deploy", the modal pops up. In my version, the modal is in the "back" where I cannot interact with the Send and Cancel buttons. I looked meticulously and it is because of a "min.css" file in my project. How can I override it such that I am able to interact with the buttons in the modal? I tried z-index but that didn't work.
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.modal-content {
background: linear-gradient(-45deg, #89f7fe 0%, #66a6ff 60%, #23A6D5, #23D5AB);
margin:auto;
padding: 20px;
border: 1px solid #888;
width: 500px;
height: 500px;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
.modal{
display: none;
position:absolute;
z-index: 10000;
padding-top: 100px;
left: 0px;
top: 0px;
width: 100%;
max-height: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal2-content {
background: white;
margin:auto;
width: 500px;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0.5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"/>
<!-- <link href="css/sb-admin-2.min.css" rel="stylesheet"> -->
<link href="css/couponsexample.css" rel="stylesheet" />
</head>
<body id="page-top">
<div id="wrapper">
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<div class="container-fluid">
<div class="card shadow mb-4">
<div class="card-header py-3">
<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
<button class="buttonTest" id="myBtn">New Discount</button>
</span>
</div>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal2-content">
<div style="background-color:#1E90FF" class="modal-header">
<font color="white">
<h4 class="modal-title" id="myModalLabel">Confirm Deployment</h4>
</font>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Please confirm that the deployed coupon is accurate and ready. Once deployed, you cannot retake the coupon until it expires. Canceling will cause problems Test Test Tes</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</div>
<div class="card-body">
<div id="myModal" class="modal">
<div class="modal-content" >
<form id="msform">
<span class="close">×</span>
<fieldset>
<h3 class="fs-subtitle">Step 4</h3>
</fieldset>
</form>
</div>
</div>
<section>
<div class="container">
<div class="row">
<div class="col s12 m6">
<div class="card">
<span>
Deploy
</span>
<div class="card-content">
<span class="card-title blue-text text-darken-2" style="white-space: nowrap">$5.00 Discount</span>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"/>
<script src="couponsjs.js"/>
</body>
</html>

Related

Why is my modal not displaying as a popup that fades from the top and centred?

I am attempting to make a portfolio image gallery that display's a model with a click that fades in and is positioned to the center.
The Button Does not properly load the modal popup.
I have tried proper linking from bootstrap and jquery files, I have also attempted to check if CSS properties are conflicting, and still, nothing works?
I don't understand if it's where I placed the modal fade or if it has to do with mixing a modal popup with a category filter menu.
I have attempted to search online everywhere but cannot seem to find any other issues with this.
Thank you for your help.
$(document).ready(function () {
$('.list').click(function () {
const value =
$(this).attr('data-filter'); if (value == 'all') { $('itemBox').show('1000'); }
else {
$('.itemBox').not('.' + value).hide('1000');
$('.itemBox').filter('.' + value).show('1000');
}
}) $('.list').click(function () {
$(this).addClass('active').siblings().removeClass('active');
})
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
section {
padding: 20px;
width: 1280px;
margin: 40px auto;
}
section ul {
display: flex;
margin-bottom: 10px;
;
}
section ul li {
list-style: none;
background: #eee;
padding: 8px 20px;
margin: 5px;
letter-spacing: 1px;
cursor: pointer;
}
section ul li.active {
background: #03a9f4;
color: #fff;
}
.product {
display: flex;
flex-wrap: wrap;
}
.product .itemBox {
position: relative;
width: 200px;
height: 300px;
margin: 5px;
}
.product .itemBox img {}
#position {}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<section>
<ul>
<li class="list active" data-filter="all">All</li>
<li class="list" data-filter="mobile">Mobile</li>
<li class="list" data-filter="camera">Camera</li>
<li class="list" data-filter="watch">Watch</li>
<li class="list" data-filter="shoe">Shoe</li>
<li class="list" data-filter="headphone">Headphone</li>
</ul>
<div class="product">
<div class="card">
<div class="card-body">
<div class="itemBox mobile"><img src="img/colorgame.jpg" />
<h5 class="card-title">Card Title</h5>
<p class="card-text">Quick TExt Example</p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="img/colorgame.jpg" />
<p>Example Paragraph text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="itemBox camera"><img src="img/colorgame.jpg"></div>
<div class="itemBox watch"><img src="img/colorgame.jpg"></div>
<div class="itemBox shoe"><img src="img/colorgame.jpg"></div>
<div class="itemBox headphone"><img src="img/colorgame.jpg"></div>
</div>
</section>

script.js not linked to html?

Here is my html:
Hello i dont get my Javascript working i used codepen.io to write it and it worked. but when i want to use it on my webhost it isnt responding. I try to use it local but its not working. I googled the problem and its proberly something about the place of but im not sure about that. Can someone help me out and teach me how i can fix this? its a problem that i get alot of times.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Sandro Swabedissen">
<title>Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-globe"></i></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid splash" id="splash">
<div class="container">
<img src="https://i.imgur.com/dqhQX0E.png" alt="Portrait of Mr. Swabedissen" class="profile-image">
<h1>HELLO!</h1>
<h1 class="intro-text"><span class="lead" id="typed">I am a </span></h1>
<span class="continue"><i class="fa fa-angle-down"></i></span>
</div>
</div>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About Me</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="content-text">Hi! I'm Sandro Swabedissen I'm 18 years old and I'm from the Netherlands and I live in Apeldoorn. I study IT support at ROC Aventus in Deventer.
</p>
</div>
<div class="col-lg-4">
<p class="content-text">I like to Photograph and longboarding and basic website coding. I spent most of my time behind the desk or hanging out with my friends.</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center contact-button">
<a href="#contact" class="btn btn-lg btn-outline">
<i class="fa fa-envelope"></i> Contact Me
</a>
</div>
</div>
</div>
</section>
<!-- Portfolio -->
<div class="container-fluid portfolio-container-holder content-section" id="portfolio">
<div class="portfolio-container container">
<h1 class="text-center">My Portfolio</h1>
<hr class="star-portfolio">
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class="container-fluid contact-me-container content-section" id="contact">
<div class="container">
<h1 class="intro-text text-center">Contact Me</h1>
<hr class="star-light">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="email" placeholder="Email ID">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-phone"></i></div>
<input type="text" class="form-control" id="phone" placeholder="Phone Number">
</div>
</div>
</div>
<div class="col-sm-12">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
</div>
<div class="text-center">
<button class="btn btn-default submit-button btn-lg btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-container">
<div class="row footer-row">
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<h4 class="text-center">Find me here</h4>
<address>
<strong><i class="fa fa-location-arrow"></i> Swabedissen Inc.</strong><br>Netherlands,<br>Gelderland, Apeldoorn<br><br>
<a class="tel" href="tel:0636597738" type="tel"><i class="fa fa-mobile"></i><span> +31 06-36597738</span></a>
</address>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 social-section">
<div class="text-center">
<h4 class="text-center">Also, I can be found here</h4>
<div class="text-center social-buttons">
<a href="https://instagram.com/simplysuvi" class="btn btn-default btn-lg social-button link-instagram"><i class="fa fa-instagram"></i>
</a>
</div><hr class="footer-hr">
<h4 class="author">Made with <i class="fa fa-heart"></i> by <strong>Sandro Swabedissen</strong></h4>
</div>
</div>
</div><hr class="copyright">
<h4><i class="fa fa-copyright"></i> COPYRIGHTS 2012 ALL RIGHTS RESERVED</h4>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
Here is my css:
* {
box-sizing: border-box;
}
#menu
{
background-color: #ffffff79;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
ul.navbar-nav {
float:right;
text-align:center;
}
ul.navbar-nav li
{
padding: 0 10px;
}
#media only screen and (max-width:767px)
{ ul.navbar-nav { float:none; } }
.container-fluid {
padding: 0 1em;
}
.navbar-nav li a
{
color:black!important;
font-size:1.2em;
font-family: Century gothic,sans-serif;
font-weight:600;
transition: 0.4s ease;
}
.navbar-nav li a:hover
{
color:#fff!important;
background-color:black!important;
}
.navbar-brand {
padding:10px 15px!important;
}
a.navbar-brand .fa-globe
{
font-size: 30px;
color: black;
transition:0.5s ease;
}
a.navbar-brand .fa-globe:hover
{
color: #3935e6;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: black!important;
}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
background-color: #fff!important;
}
.container {
margin: 0 auto;
max-width: 996px;
}
.splash {
background:url("https://photos.gurushots.com/unsafe/0x0/351cef5284542fdc28a01f8d2c67c3be/3_ea1623d74f3828136d8e55e6cd5501e1.jpg") no-repeat fixed center bottom;
background-size: cover;
color: #fff;
}
.splash .container {
padding-top: 15vh; /* No JS fallback*/
padding-bottom: 10vh; /* No JS fallback*/
}
.profile-image {
border-radius: 50%;
display: block;
max-height:250px;
max-width: 250px;
margin: 0 auto 1em;
width: 100%;
opacity: 0.85;
}
.splash h1 {
font-size: 40px;
margin-bottom: .15em;
text-align: center;
}
.splash .lead, .splash .continue {
display: inline-block;
text-align: center;
}
h1.intro-text
{
margin:0;
color:#fff;
}
.splash .lead {
font-size: 30px;
margin-bottom: 1em;
font-family: Rockwell;
}
.navbar-inverse
{
border:none!important;
}
#keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-moz-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-ms-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-o-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
/* code for animated blinking cursor */
#typed-cursor
{
opacity: 1;
font-size: 40px;
color: #fff;
font-weight: 50;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
-o-animation: blink 1s infinite;
animation: blink 1s infinite;
}
.splash .continue {
font-size: 3em;
display:block;
}
.splash .continue a {
border: 2px solid #fff;
border-radius: 100%;
color: #fff;
display: inline-block;
text-decoration: none;
width: 40px;
height:40px;
font-size:30px;
}
.splash .continue a:hover {
background-color: rgba(255, 255, 255, .25);
}
#about,#portfolio,#contact
{
padding-top:4em!important;
}
section h2 {
margin: 0;
font-size: 3em;
}
section.success {
color: #fff;
background: rgb(13, 79, 136);
padding: 2%;
}
section.success a
{
color:black;
transition: 0.4s ease;
}
section.success a:hover {
outline: 0;
color: #fff;
border: 2px solid #fff;
}
.contact-button
{
padding-bottom:2%;
}
hr.star-light,hr.star-portfolio {
margin: 25px auto 30px;
padding: 0;
max-width: 250px;
border: 0;
border-top: solid 3px;
text-align: center;
}
hr.star-light:after,hr.star-portfolio:after {
content: "\f005";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-family: FontAwesome;
font-size: 2em;
}
hr.star-light {
border-color: #fff;
}
hr.star-portfolio {
border-color: black;
}
hr.star-portfolio:after {
color: black;
background-color: #eee;
}
hr.star-light:after {
color: #fff;
background-color: rgb(13, 79, 136);
}
p.content-text { font-size: 25px; }
/* PORTFOLIO */
.portfolio-card{
box-shadow: 0px 2px 5px #888888;
background: #eee;
border-radius: 4px;
}
.portfolio-card:hover{
box-shadow: 0px 10px 10px #888888;
cursor: pointer
}
.portfolio-container-holder{
background: #eee;
padding-bottom: 20px;
}
.portfolio-card-holder{
padding: 5px;
margin-bottom: 5px;
}
.portfolio-img{
width: 100%;
border-radius: 4px 4px 0 0;
}
.portfolio-img-desc{
position: relative;
bottom: 0px;
left: 0px;
right: 0px;
background: #fff;
color: #000;
text-align: center;
padding: 5px;
}
/* Contact */
.contact-me-container{
padding:3%;
background: rgb(13, 79, 136);
}
.fa-user,.fa-at,.fa-phone
{
color:black;
}
.submit-button{
margin-top: 10px;
margin-bottom: 10px;
}
/* ========================
Footer
======================== */
footer {
background-color: #2C3E50;
color: #fff;
font-size: 1.5em;
text-align: center;
padding:3%;
}
a.tel,a.tel:hover
{
text-decoration:none;
color:#fff;
}
a.social-button {
background: #fff;
font-size: 20px;
border-radius: 50%;
margin: 5px;
}
.address-container{
display: inline-block;
margin: 0 auto;
}
a.link-facebook,a.link-twitter,a.link-codepen,a.link-linkedin,a.link-instagram
{
transition:0.4s ease;
}
a.link-twitter
{
color:#1DA1F2;
}
a.link-facebook
{
color: #3b5998;
}
a.link-linkedin
{
color:#007bb6;
}
a.link-instagram
{
color:#e95950;
}
a.link-facebook:hover{
background-color: #3b5998;
color: #fff;
}
a.link-twitter:hover{
background-color: #1DA1F2;
color: #fff;
}
a.link-codepen:hover{
background-color: black;
color: #fff;
}
a.link-linkedin:hover{
background-color: #007bb6;
color: #fff;
}
a.link-instagram:hover{
background-color: #e95950;
color: #fff;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: transparent!important;
}
.fa-heart {
color:#f32323;
}
h4.author
{
letter-spacing:4px;
}
hr.footer-hr
{
width:150px;
}
hr.copyright
{
opacity:0.4;
}
Here is my script.js:
$( window ).resize( function() {
centerSplash();
});
!function($){
"use strict";
var Typed = function(el, options){
// chosen element to manipulate text
this.el = $(el);
// options
this.options = $.extend({}, $.fn.typed.defaults, options);
// text content of element
this.text = this.el.text();
// typing speed
this.typeSpeed = this.options.typeSpeed;
// amount of time to wait before backspacing
this.backDelay = this.options.backDelay;
// input strings of text
this.strings = this.options.strings;
// character number position of current string
this.strPos = 0;
// current array position
this.arrayPos = 0;
// current string based on current values[] array position
this.string = this.strings[this.arrayPos];
// number to stop backspacing on.
// default 0, can change depending on how many chars
// you want to remove at the time
this.stopNum = 0;
// Looping logic
this.loop = this.options.loop;
this.loopCount = this.options.loopCount;
this.curLoop = 1;
if (this.loop === false){
// number in which to stop going through array
// set to strings[] array (length - 1) to stop deleting after last string is typed
this.stopArray = this.strings.length-1;
}
else{
this.stopArray = this.strings.length;
}
// All systems go!
this.init();
this.build();
}
Typed.prototype = {
constructor: Typed
, init: function(){
// begin the loop w/ first current string (global self.string)
// current string will be passed as an argument each time after this
this.typewrite(this.string, this.strPos);
}
, build: function(){
this.el.after("<span id=\"typed-cursor\">|</span>");
}
// pass current string state to each function
, typewrite: function(curString, curStrPos){
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
var self = this;
// ------------- optional ------------- //
// backpaces a certain string faster
// ------------------------------------ //
// if (self.arrayPos == 1){
// self.backDelay = 50;
// }
// else{ self.backDelay = 500; }
// containg entire typing function in a timeout
setTimeout(function() {
// make sure array position is less than array length
if (self.arrayPos < self.strings.length){
// start typing each new char into existing string
// curString is function arg
self.el.text(self.text + curString.substr(0, curStrPos));
// check if current character number is the string's length
// and if the current array position is less than the stopping point
// if so, backspace after backDelay setting
if (curStrPos > curString.length && self.arrayPos < self.stopArray){
clearTimeout(clear);
var clear = setTimeout(function(){
self.backspace(curString, curStrPos);
}, self.backDelay);
}
// else, keep typing
else{
// add characters one by one
curStrPos++;
// loop the function
self.typewrite(curString, curStrPos);
// if the array position is at the stopping position
// finish code, on to next task
if (self.loop === false){
if (self.arrayPos === self.stopArray && curStrPos === curString.length){
// animation that occurs on the last typed string
// fires callback function
var clear = self.options.callback();
clearTimeout(clear);
}
}
}
}
// if the array position is greater than array length
// and looping is active, reset array pos and start over.
else if (self.loop === true && self.loopCount === false){
self.arrayPos = 0;
self.init();
}
else if(self.loopCount !== false && self.curLoop < self.loopCount){
self.arrayPos = 0;
self.curLoop = self.curLoop+1;
self.init();
}
// humanized value for typing
}, humanize);
}
, backspace: function(curString, curStrPos){
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
var self = this;
setTimeout(function() {
// ----- this part is optional ----- //
// check string array position
// on the first string, only delete one word
// the stopNum actually represents the amount of chars to
// keep in the current string. In my case it's 14.
if (self.arrayPos == 1, 2, 3, 4){
self.stopNum = 0;
}
//every other time, delete the whole typed string
//else{
//self.stopNum = 0;
//}
// ----- continue important stuff ----- //
// replace text with current text + typed characters
self.el.text(self.text + curString.substr(0, curStrPos));
// if the number (id of character in current string) is
// less than the stop number, keep going
if (curStrPos > self.stopNum){
// subtract characters one by one
curStrPos--;
// loop the function
self.backspace(curString, curStrPos);
}
// if the stop number has been reached, increase
// array position to next string
else if (curStrPos <= self.stopNum){
clearTimeout(clear);
var clear = self.arrayPos = self.arrayPos+1;
// must pass new array position in this instance
// instead of using global arrayPos
self.typewrite(self.strings[self.arrayPos], curStrPos);
}
// humanized value for typing
}, humanize);
}
}
$.fn.typed = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('typed')
, options = typeof option == 'object' && option
if (!data) $this.data('typed', (data = new Typed(this, options)))
if (typeof option == 'string') data[option]()
});
}
$.fn.typed.defaults = {
strings: ["Hello, hola, hi! ", "Welcome to my website ", "Go on, scroll down", ":)"],
// typing and backspacing speed
typeSpeed: 50, // speed decreases as number increased
// time before backspacing
backDelay: 100,
// loop
loop: true,
// false = infinite
loopCount: false,
// ending callback function
callback: function(){ null }
}
}(window.jQuery);
$(function(){
$("#typed").typed({
strings: ["web developer","photographer","human being"], //Strings to display when typing
typeSpeed: 40,
backDelay: 600,
loop: true,
// defaults to false for infinite loop
loopCount: false,
callback: function(){ foo(); }
});
function foo(){ console.log("Callback"); }
});

You are running the script in head and expecting all of the document's content to be loaded (for example the typed div). This explains why it works in Codepen but not in your local environment, because Codepen runs the javascript after the html content has been loaded.
To solve this, you can use an event listener to wait for the document to fully load.
The document is not loaded by the time you are trying to find an element with the id typed. Change it to
$(document).ready(function(){
$("#typed").typed({
strings: ["web developer","photographer","human being"], //Strings to display when typing
typeSpeed: 40,
backDelay: 600,
loop: true,
// defaults to false for infinite loop
loopCount: false,
callback: function(){ foo(); }
});
function foo(){ console.log("Callback"); }
});
Docs on document.ready

I was able to fix your web page for you, but there is one thing I cannot fix. I have no idea what you wanted to do with this part of your script.js:
$( window ).resize( function() {
centerSplash();
});
There is no function anywhere called centerSplash. Most of your errors were in your html file, but I fixed them all. The main errors were that you were importing 2 different versions of jQuery and your scripts/links were trying to access local files when they were being run directly through the file system.
With that out of the way, here is your fixed HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Sandro Swabedissen">
<title>Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-globe"></i></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid splash" id="splash">
<div class="container">
<img src="https://i.imgur.com/dqhQX0E.png" alt="Portrait of Mr. Swabedissen" class="profile-image">
<h1>HELLO!</h1>
<h1 class="intro-text"><span class="lead" id="typed">I am a </span></h1>
<span class="continue"><i class="fa fa-angle-down"></i></span>
</div>
</div>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About Me</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="content-text">Hi! I'm Sandro Swabedissen I'm 18 years old and I'm from the Netherlands and I live in Apeldoorn. I study IT support at ROC Aventus in Deventer.
</p>
</div>
<div class="col-lg-4">
<p class="content-text">I like to Photograph and longboarding and basic website coding. I spent most of my time behind the desk or hanging out with my friends.</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center contact-button">
<a href="#contact" class="btn btn-lg btn-outline">
<i class="fa fa-envelope"></i> Contact Me
</a>
</div>
</div>
</div>
</section>
<!-- Portfolio -->
<div class="container-fluid portfolio-container-holder content-section" id="portfolio">
<div class="portfolio-container container">
<h1 class="text-center">My Portfolio</h1>
<hr class="star-portfolio">
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class="container-fluid contact-me-container content-section" id="contact">
<div class="container">
<h1 class="intro-text text-center">Contact Me</h1>
<hr class="star-light">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="email" placeholder="Email ID">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-phone"></i></div>
<input type="text" class="form-control" id="phone" placeholder="Phone Number">
</div>
</div>
</div>
<div class="col-sm-12">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
</div>
<div class="text-center">
<button class="btn btn-default submit-button btn-lg btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-container">
<div class="row footer-row">
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<h4 class="text-center">Find me here</h4>
<address>
<strong><i class="fa fa-location-arrow"></i> Swabedissen Inc.</strong><br>Netherlands,<br>Gelderland, Apeldoorn<br><br>
<a class="tel" href="tel:0636597738" type="tel"><i class="fa fa-mobile"></i><span> +31 06-36597738</span></a>
</address>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 social-section">
<div class="text-center">
<h4 class="text-center">Also, I can be found here</h4>
<div class="text-center social-buttons">
<a href="https://instagram.com/simplysuvi" class="btn btn-default btn-lg social-button link-instagram"><i class="fa fa-instagram"></i>
</a>
</div><hr class="footer-hr">
<h4 class="author">Made with <i class="fa fa-heart"></i> by <strong>Sandro Swabedissen</strong></h4>
</div>
</div>
</div><hr class="copyright">
<h4><i class="fa fa-copyright"></i> COPYRIGHTS 2012 ALL RIGHTS RESERVED</h4>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
style.css is the same.
script.js will work as is, but I would comment out those first three lines until you figure out what it is you want to do with the centerSplash thing.
Nice page btw.

bootstrap modal disappears when mouse off browser window, doesn't return

I made a quick CodePen to highlight the issue.
https://codepen.io/robbullock/pen/NwWqYE
1) Hover over the card
2) Click "Request Access" button
3) Mouse off the screen and the modal disappears and doesn't come back.
I believe the issue that's causing the problem is with the ".content .content-overlay" classes below, along with the corresponding hover effects.
.content .content-overlay {
background: rgba(51, 51, 51, 0.9);
position: absolute;
height: 270px;
width: 270px;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
border-radius:8px;
}
.content:hover .content-overlay {
opacity: 1;
}
.content:hover .content-details {
top: 50%;
left: 50%;
opacity: 1;
}
Is there any way to prevent this type of behavior?

That is because you have left the .content-overlay element unclosed and so it wrap the modal element as well. So when you mouse out of the page, the :hover rules do not apply and the modal goes away as its container is hidden.
See https://codepen.io/anon/pen/mqdedj

move the modal out of the < li > tag
<li class="col-md-4 content allAvail">
<div class="card">
<div class="card-block">
<p class="card-title-none">Title</p>
<p class="card-type">text</p>
</div>
</div>
<div class="content-overlay">
<div class="card-content content-details-noaccess fadeIn">
<div class="about">About</div>
<div class="description">text and some stuff</div>
<button type="button" class="button primary-request" data-toggle="modal" data-target="#myModal">Request Access</button>
<a href="/">
<button class="button secondary-btn-noaccess">View Details</button>
</a>
</div>
<!-- CC MODAL ACCESS -->
</div>
</li>
<!-- END MODAL -->
<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

How to slide in from right with jQuery, with transitions?

I have a code that when you click on a button, a div appears. But the thing is, my div slides in from the top, and I want to have it when someone clicks on the button, it slides in from the right with transitions. But I don't know how to change my current code to make that work. I know I can't switch from display: none to visibility and opacity to add CSS animations, right? So what can I do to make this as smooth as possible? Can someone please take a look and help me out?
Here's my code:
$(function() {
$("a#toggle").click(function() {
$("#slidein").slideToggle();
return false;
});
});
#slidein {
display: none;
}
.card {
background-color: #bdbdbd;
text-transform: uppercase;
position: fixed;
right: 0;
top: 0;
height: 100%;
}
.close {
position: absolute;
right: 0;
background: #fff;
opacity: 1;
color: #29292b;
font-size: 10px;
text-decoration-color: #757575;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="slidein">
<div class="card rounded-0 border-0">
<div class="card-header border-0 p-0">
<button type="button" class="close p-2">
<span aria-hidden="true">x close</span>
</button>
<img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200">
</div>
<!-- /.card-header -->
<div class="card-block py-4 px-3">
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT
<span>TEXT</span>
<span>TEXT</span>
</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<div class="form-group">
<textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="TEXT..."></textarea>
</div>
</div>
<!-- /.card-block -->
</div>
</div>
Contact

You can use CSS transition to achieve your goal. Initially, the slide in panel #slidein will sit outside of the right edge of your screen. A CSS class in will be toggled when you click a#toggle. Clicking on button.close will remove the class in from #slidein that will slide the panel out.
$(function() {
$("a#toggle").click(function() {
$("#slidein").toggleClass("in");
return false;
});
$("button.close").click(function() {
$("#slidein").removeClass("in");
return false;
});
});
#slidein {
position: fixed;
top: 0;
width: 100%; /*modify this value to fit your needs*/
right: -100%; /*modify this value to fit your needs*/
/*css transition*/
-webkit-transition: right 500ms ease-out;
-moz-transition: right 500ms ease-out;
-o-transition: right 500ms ease-out;
transition: right 500ms ease-out;
}
#slidein.in {
right: 0;
}
.card {
background-color: #bdbdbd;
text-transform: uppercase;
height: 100%;
}
.close {
position: absolute;
right: 0;
background: #fff;
opacity: 1;
color: #29292b;
font-size: 10px;
text-decoration-color: #757575;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="slidein">
<div class="card rounded-0 border-0">
<div class="card-header border-0 p-0">
<button type="button" class="close p-2">
<span aria-hidden="true">x close</span>
</button>
<img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200">
</div>
<!-- /.card-header -->
<div class="card-block py-4 px-3">
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT
<span>TEXT</span>
<span>TEXT</span>
</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<div class="form-group">
<textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="TEXT..."></textarea>
</div>
</div>
<!-- /.card-block -->
</div>
</div>
Contact

Specify jQuery overlay function to one element and not open all at once

I'm doing a school project about creating a new website for this dog club called, Danish Terrier Club.
I've wanted to make a race page about all the terriers and build it up by creating hexagon pictures and give them each an overlay, so when you click on it the rest becomes darks and a box pops up with infos and more pictures about the race you've clicked on.
Got it all to work but I have this problem that the jQuery code is not specific to the one you click on. For some reason, it opens all of the overlays at the same time and they stack on each other.
Can anyone help me find out what I must change in my code?
ps.
Most of the code is found on different open sources.
/*
* overlay.js v1.0.0
* Copyright 2014 Joah Gerstenberg (www.joahg.com)
*/
(function($) {
$.fn.overlay = function() {
overlay = $('.overlay');
overlay.ready(function() {
overlay.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
if (!overlay.hasClass('shown')) {
overlay.css('visibility', 'hidden');
}
});
overlay.on('show', function() {
overlay.css('visibility', 'visible');
overlay.addClass('shown');
return true;
});
overlay.on('hide', function() {
overlay.removeClass('shown');
return true;
});
overlay.on('click', function(e) {
if (e.target.className === overlay.attr('class')) {
return overlay.trigger('hide');
} else {
return false;
}
})
$('a[data-overlay-trigger]').on('click', function() {
overlay.trigger('show');
});
})
};
})(jQuery);
.outerbox {
display:flex;
align-items:center;
justify-content:center;
}
#easyOverlay{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
visibility: hidden;
top: 0;
color:#fff;
z-index: 1000;
}
#easyOverlay .closeit {
position: absolute;
right: 0px;
top: 0px;
padding: 5px;
background: #333;
color: #fff;
cursor: pointer;
z-index: 2000;
text-decoration: none;
}
#flexcolumn {
display:flex;
flex-direction:row;
}
.firstcolumn {
flex-direction:column;
margin-top:auto;
margin-bottom:auto;
}
.secondcolumn {
flex-direction:column;
margin-top:auto;
margin-bottom:auto;
}
.thirdcolumn {
flex-direction:column;
margin-top:auto;
margin-bottom:auto;
}
.fourthcolumn {
flex-direction:column;
margin-top:auto;
margin-bottom:auto;
}
.fifthcolumn {
flex-direction:column;
margin-top:auto;
margin-bottom:auto;
}
.sixthcolumn {
flex-direction:column;
margin-top:auto;
margin-bottom:auto;
}
.seventhcolumn {
flex-direction:column;
margin-top:auto;
margin-bottom:auto;
text-align:center;
}
.overlay {
visibility: hidden;
opacity: 0;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.85);
cursor: pointer;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.overlay .modal {
cursor: auto;
position: absolute;
z-index: 11;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
max-width: 500px;
max-height: 300px;
padding: 20px;
background-color: rgb(255,255,255);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.overlay.shown {
opacity: 1;
}
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>DTK Hexagon</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="dist/overlay.js"></script>
<script>
$(document).ready(function() {
$('.overlay').overlay();
});
</script>
<link rel="stylesheet" href="dist/overlay.css">
<link href="stylehexagon.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--
flexcolumn ID = put every column in a row beside each other
the column divs = put every picture in a column
-->
<div class="outerbox">
<div id="flexcolumn">
<div class="firstcolumn">
<div class="borderterrier">
<a data-overlay-trigger href="#!"><img src="img/borderterrier.png"></a>
<div class="overlay">
<div class="modal">
<h1>Border terrier</h1>
<p>Jeg ser ingen border :I</p>
</div>
</div>
</div>
<div class="foxterrierglathaaret">
<a data-overlay-trigger href="#!"><img src="img/sada.png"></a>
<div class="overlay">
<div class="modal">
<h1>Fox terrier glathåret</h1>
<p>den er glat håret :I</p>
</div>
</div>
</div>
</div>
<div class="secondcolumn">
<div class="airedaleterrier">
<a data-overlay-trigger href="#!"><img src="img/airedaleterrier.png"></a>
<div class="overlay">
<div class="modal">
<h1>Airedale terrier</h1>
<p>Airedale.. Dafuq :I</p>
</div>
</div>
</div>
<div class="bullterrier">
<a data-overlay-trigger href="#!"><img src="img/bullterrier.png"></a>
</div>
<div class="foxterrierruhaaret">
<a data-overlay-trigger href="#!"><img src="img/fox_terrier_ruhaaret.png"></a>
</div>
<div class="kerryblueterrier">
<a data-overlay-trigger href="#!"><img src="img/kerry_blue_terrier.png"></a>
</div>
<div class="norwichterrier">
<a data-overlay-trigger href="#!"><img src="img/norwich_terrier.png"></a>
</div>
</div>
<div class="thirdcolumn">
<div class="americanstaffordshireterrier">
<a data-overlay-trigger href="#!"><img src="img/muricanstaffordshireterrier.png"></a>
</div>
<div class="bull_terrier_miniature">
<a data-overlay-trigger href="#!"><img src="img/bull_terrier_miniature.png"></a>
</div>
<div class="irishglenofimaal">
<a data-overlay-trigger href="#!"><img src="img/irish_glen_of_imaal.png"></a>
</div>
<div class="lakelandterrier">
<a data-overlay-trigger href="#!"><img src="img/lakeland_terrier.png"></a>
</div>
<div class="parsonrussellterrier">
<a data-overlay-trigger href="#!"><img src="img/parson_russell_terrier.png"></a>
</div>
<div class="staffordshirebullterrier">
<a data-overlay-trigger href="#!"><img src="img/staffordshire_bull_terrier.png"></a>
</div>
</div>
<div class="fourthcolumn">
<div class="australskterrier">
<a data-overlay-trigger href="#!"><img src="img/australsk_terrier.png"></a>
</div>
<div class="cairn_terrier">
<a data-overlay-trigger href="#!"><img src="img/cairn_terrier.png"></a>
</div>
<div class="irishsoftcoatedwheatenterrier">
<a data-overlay-trigger href="#!"><img src="img/irish_soft_coated_wheaten_terrier.png"></a>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="sealyhamterrier">
<a data-overlay-trigger href="#!"><img src="img/sealyham_terrier.png"></a>
</div>
<div class="terrierbrasileiro">
<a data-overlay-trigger href="#!"><img src="img/terrier_brasileiro.png"></a>
</div>
<div class="westhighlandwhiteterrier">
<a data-overlay-trigger href="#!"><img src="img/west_highland_white_terrier.png"></a>
</div>
</div>
<div class="fifthcolumn">
<div class="australiansilkyterrier">
<a data-overlay-trigger href="#!"><img src="img/australian_silky_terrier.png"></a>
</div>
<div class="ceskyterrier">
<a data-overlay-trigger href="#!"><img src="img/cesky_terrier.png"></a>
</div>
<div class="irskterrier">
<a data-overlay-trigger href="#!"><img src="img/irsk_terrier.png"></a>
</div>
<div class="manchesterterrier">
<a data-overlay-trigger href="#!"><img src="img/manchester_terrier.png"></a>
</div>
<div class="skotskterrier">
<a data-overlay-trigger href="#!"><img src="img/skotsk_terrier.png"></a>
</div>
<div class="welshterrier">
<a data-overlay-trigger href="#!"><img src="img/welsh_terrier.png"></a>
</div>
</div>
<div class="sixthcolumn">
<div class="bedlingtonterrier">
<a data-overlay-trigger href="#!"><img src="img/bedlington_terrier.png"></a>
</div>
<div class="dandiedinmontterrier">
<a data-overlay-trigger href="#!"><img src="img/dandie_dinmont_terrier.png"></a>
</div>
<div class="jackrussellterrier">
<a data-overlay-trigger href="#!"><img src="img/jack_russell_terrier.png"></a>
</div>
<div class="norfolkterrier">
<a data-overlay-trigger href="#!"><img src="img/norfolk_terrier.png"></a>
</div>
<div class="skyeterrier">
<a data-overlay-trigger href="#!"><img src="img/skye_terrier.png"></a>
</div>
</div>
<div class="seventhcolumn">
<div class="engelsktoyterrier">
<a data-overlay-trigger href="#!"><img src="img/engelsk_toy_terrier.png"></a>
</div>
<div class="japanskterrier">
<a data-overlay-trigger href="#!"><img src="img/japansk_terrier.png"></a>
</div>
</div>
</div>
</div>
</body>
</html>

When I built the overlay.js script, I didn't account for multiple overlays on one page. I've updated it now to account for this, and you can get the new, updated script here: https://github.com/JoahG/overlay.js/blob/gh-pages/dist/overlay.js
Now, you can specify which overlay you want your links to trigger by using ID's on your overlays. For example:
<a data-overlay-trigger="airdale" href="#!"><img src="img/airedaleterrier.png"></a>
<!-- added ="airdale" to specify the ID of the appropriate modal -->
<div class="overlay" id="airdale"> <!-- add ID to modal -->
<div class="modal">
<h1>Airedale terrier</h1>
<p>Airedale.. Dafuq :I</p>
</div>
</div>
Hope that helps!

Categories