I use google script to generate data each consisting of a picture and name.
I can do the popup for one item.
How to do it with the generated items?
Here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://fonts.googleapis.com/css?family=Aref+Ruqaa:400,700|Cairo&subset=arabic" rel="stylesheet">
<meta content="ar-bh" http-equiv="Content-Language" />
<meta content="text/html; charset=windows-1256" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
td {border: 1px solid #ccc;}</style>
<style type="text/css">
body {
font-family: 'Aref Ruqaa', serif;
}
#largeImgPanel {
text-align: center;
display: none;
position: fixed;
z-index: 100;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(100,100,100, 0.5);
}
</style>
<style>
#table_id {display: block; }
#table_id td {display: inline-block; }
#rcorners6 {
border-radius: 15px 50px;
background: #73AD21;
padding: 0px;
width: 150px;
height: 25x;
}
</style>
<style>
div.polaroid2 {
width: 200px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.polaroid {
width: 200px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.container {
padding: 1px;
}
</style>
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body>
<table id="table_id" align="center" cellpadding="10" >
<tr>
<? var data = getData1(); ?>
<? for (var i = 2; i <= 1+data[0][3] ; i++) { ?>
<td style="border-width: 0"><div class="polaroid">
<img height="160" src=<?= data[i][8] ?> width="127" style="text-align: center" >
<div id='a<?= i ?>' class="popup" onclick="myFunction()" class="container">
<?= data[i][3] ?> <br> <?= data[i][4] ?> <span class="popuptext" id='myPopup<?= i ?>'><?= data[i][3] ?> ميااااااو</span>
</div>
</div></td>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById('myPopup');
popup.classList.toggle('show');
}
</script>
<? } ?>
</tr>
</table>
<meta content="Sheets" name="generator" />
<style type="text/css"><!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}
.auto-style1 {
border-collapse: collapse;
border: 2px solid #000000;
}
.auto-style2 {
direction: rtl;
}
.auto-style3 {
border-width: 0;
}
.auto-style4 {
font-size: midium;
}
.auto-style5 {
direction: rtl;
font-size: midium;
}
.auto-style6 {
font-size: midium;
}
--></style>
</body>
<p>
<img border="0" src="https://drive.google.com/uc?export=download&id=0B33gublUUxAtYkRPUjFVUGExNm8" width="90" height="12" align="left"></p>
</html>
and here is what I get
https://script.google.com/macros/s/AKfycbxxV4G7YN7Pg3C-aZIniNPExNI7jQhMn7-O92RA60dtDmX17Ko/exec?page=2
Distribute your toggle event like this below:
function myFunction(element) {
element.childNodes[3].classList.toggle('show');
}
Update your onclick to myFunction(this).
There are lots of way to do this, but that's how I will do it since the span element position if assumed to be static.
Related
I want to make an weather app and I want to let the user to add in the application some weather cards with the city they are interested with. If they no longer want a specific weather card, they can delete it. For now, you can add some empty cards by using the + button.
Below is what I did and how the app looks like.
In the first phase I want the displayed cards to show the city weather information at the current time and with a hover I want the card to expand and display more information about that city such as a 5 day forecast.
I don't know how to stretch a specific card on hover and I'm asking your help with this problem. Thank you!
const displayContent = document.querySelector('.content');
const widget = document.querySelector('.widget');
const addWidget = document.querySelector(".addButton");
console.log(displayContent)
addWidget.addEventListener('click', newWidget);
var cont=0;
function newWidget(){
cont=cont+1;
let newWidget = document.createElement('div');
newWidget.setAttribute('class', 'widget');
newWidget.setAttribute('id', "widget" + cont);
let closeBtn = document.createElement('span');
closeBtn.setAttribute('class', 'remove');
closeBtn.setAttribute('id', 'remove' +cont);
closeBtn.textContent = '✕';
displayContent.appendChild(newWidget);
newWidget.appendChild(closeBtn);
//remove the cards
var close = document.querySelectorAll("span");
for(let i=0 ; i<close.length; i++){
close[i].addEventListener('click', () =>{
close[i].parentElement.remove();
})
}
}
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
:root {
--fontcolor: #313131;
--bgcolor: #FAFAFA;
}
html {
font-family: "Roboto", sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bgcolor);
margin: 0;
color: var(--fontcolor);
transition: background-color 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container {
max-width: 85vw;
margin: 0 auto;
}
header {
display: flex;
margin-bottom: 30px;
font-size: 1.5em;
align-items: center;
justify-content: space-between;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid black;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
}
.addButton {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 6px 5px 0;
cursor: pointer;
font-size: 20px;
}
.content {
margin-bottom: 1em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-rows: minmax(250px, 1fr);
grid-gap: 25px;
}
.widget {
color: white;
display: flex;
flex-direction: column;
padding: 25px;
position: relative;
white-space: normal;
word-wrap: break-word;
transition: background-color 50ms;
background: linear-gradient(130deg, rgba(25,118,210,1) 0%, rgba(63,81,181,1) 100%);
box-shadow: 5px 5px 18px -1px rgb(0 0 0 / 34%);
border-radius: 5px;
}
.remove{
position: absolute;
top: 5px;
right: 12px;
font-size: 22px;
opacity: 0.7;
cursor: pointer;
}
#keyframes append-animate {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0%);
opacity: 1;
}
}
/* animate new box */
.widget {
animation: append-animate .3s linear;
}
<!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">
<title>My Library</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/31c84a9fec.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="header">
<h1 id='title'>Weather App</h1>
<div class="control">
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="Add a city">
<button type="submit" class="addButton">+</button>
</div>
</div>
</div>
</header>
<div class="content">
<div class="widget" id="widget0">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Have you tried using CSS transitions?
div {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
transition: all 1s;
}
div.h:hover {
width: 150px;
background-color: purple;
}
div.v:hover {
height: 150px;
background-color: purple;
}
<div class="h"></div>
<div class="v"></div>
I have the following code to close modal window when I click on close button. I want it to close with going up animation. For now modal window goes up and then it goes back again.
But it doesn't work. Can someone please help me why is that so?
<!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">
<title>Document</title>
<style>
.modal-window{
position: fixed;
left:0;
right:0;
top:0;
display: none;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
z-index: 1;
}
.card{
margin: 100px auto;
position: relative;
z-index: 1;
width: 500px;
height: 300px;
text-align: center;
padding-top: 100px;
background-color: #fefefe;
animation: open .4s;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.show{
display: block;
}
.close-with-anim{
animation:close .4s;
}
#keyframes close {
from{
top:0;
opacity: 1;
}
to{
top:-300px;
opacity: 0;
display: none;
}
}
#keyframes open {
from{
top:-300px;
opacity: 0;
}
to{
top:0;
opacity: 1;
}
}
.close{
cursor: pointer;
}
</style>
</head>
<body>
<button id="modal">Modal window</button>
<div class="modal-window">
<div class="card">
<span class="close">×</span>
<div class="modal-content">
Sign up page
</div>
<div class="moda-form">
<input type="text" name="" id="">
</div>
</div>
</div>
<script>
const modal=document.querySelector('#modal');
const modalWindow=document.querySelector('.modal-window');
const close=document.querySelector('.close');
modal.addEventListener('click',()=>{
modalWindow.classList.toggle('show');
})
close.addEventListener('click',()=>{
modalWindow.classList.add('close-with-anim');
})
</script>
</body>
</html>
Here is the link to codesandbox: https://codesandbox.io/s/agitated-davinci-1dqujt?file=/index.html
animation: close 0.4s forwards; to prevent the animation from resetting to its initial frame.
z-index: -1; inside the close keyframe to not block your "Modal window" button.
And you need to remove close-with-anim to be able to use it again.
const modal = document.querySelector("#modal");
const modalWindow = document.querySelector(".modal-window");
const close = document.querySelector(".close");
modal.addEventListener("click", () => {
modalWindow.classList.remove("close-with-anim");
modalWindow.classList.toggle("show");
});
close.addEventListener("click", () => {
modalWindow.classList.add("close-with-anim");
});
.modal-window {
position: fixed;
left: 0;
right: 0;
top: 0;
display: none;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.card {
margin: 100px auto;
position: relative;
z-index: 1;
width: 500px;
height: 300px;
text-align: center;
padding-top: 100px;
background-color: #fefefe;
animation: open 0.4s;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.show {
display: block;
}
.close-with-anim {
animation: close 0.4s forwards;
}
#keyframes close {
from {
top: 0;
opacity: 1;
}
to {
top: -300px;
opacity: 0;
display: none;
z-index: -1;
}
}
#keyframes open {
from {
top: -300px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
.close {
cursor: pointer;
}
<button id="modal">Modal window</button>
<div class="modal-window">
<div class="card">
<span class="close">×</span>
<div class="modal-content">
Sign up page
</div>
<div class="moda-form">
<input type="text" name="" id="" />
</div>
</div>
</div>
I'm trying to make a menu with jquery but when i hover over "Menu" and try clicking one of the buttons it slides back up. anyone who knows how to fix this?
Here is my Jquery:
$(document).ready(function() {
$(".slide").hide();
$("#menu").hover(function() {
$(".slide").slideToggle("slow");
});
$(".logo").click(function() {
window.location = 'index.html';
});
$(".logo").hover(function() {
});
});
Here is the full code:
https://jsfiddle.net/lollz4/dh1kLh8L/
P.S. I'm new here so sorry if I'm doing anything wrong.
Add an additional wrapper around your menu and check for the hover state on that element instead:
$(document).ready(function() {
$(".slide").hide();
$("#menu-wrapper").hover(function() {
$(".slide").slideToggle("slow");
});
$(".logo").click(function() {
window.location = 'index.html';
});
$(".logo").hover(function() {
});
});
* {
margin-top: 0px;
margin-left: 0px;
}
body {
background-color: #EBEDEF;
}
.page {
background: white;
width: 100%;
height: 52em;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 2px;
position: absolute;
margin: 0;
padding: 0;
}
#menu {
display: block;
position: absolute;
left: 0em;
top: 0em;
background-color: #2E4053;
border: none;
padding: 15px 32px;
font-size: 16px;
clear: both;
}
.slide {
display: block;
left: 0em;
top: 0em;
position: relative;
background-color: #2E4053;
border: none;
padding: 15px 32px;
font-size: 16px;
clear: both;
}
.logo {
height: 3em;
width: 100%;
background-color: #ABB2B9;
padding: 0px;
margin: 0px;
position: fixed;
}
div img {
margin: auto;
width: 8em;
height: 3em;
background-color: #607D8B;
border-radius: 2px;
display: block;
padding-top: 0;
}
div img:hover {
opacity: 0.80;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="scripts.js"></script>
<title>Stefan's Website</title>
</head>
<body>
<div class="logo">
<img src="http://previews.123rf.com/images/alexutemov/alexutemov1511/alexutemov151100338/48202700-Pizza-flat-icon-logo-template-Pizza-food-silhouette-Pizza-piece-logo-pizza-slice-logo-Pizza-menu-ill-Stock-Vector.jpg" width="160em" height="90em">
<div id="menu-wrapper">
<button id="menu">
Menu
</button>
<button class="slide">
Pagina1
</button>
<button class="slide">
Pagina2
</button>
<button class="slide">
Pagina3
</button>
</div>
</div>
<!--<div class="page">
</div>-->
</body>
</html>
I'm trying to implement and link up CSS as well as JS to an HTML file provided by a friend of mine for a project I'm working on.
I've linked up the CSS with no problems, but the .js file I'm trying to link just won't work. Because the script won't work, my HTML keypad doesn't work :(
Anyone notice anything I'm doing wrong?
window.pass = 1234;
window.redirectURL = 'http://www.google.com';
$(document).ready(function() {
start();
});
function start() {
window.tries = 0;
$(".key").click(function(){
var n = $(this).html();
$('.screen').append( n );
window.tries++;
updateFlasher();
validate();
});
}
function updateFlasher() {
if (window.tries <=3) {
var dis = window.tries * 55;
$('.flasher').css({
'left' : dis + 'px'
});
}
else {
$('.flasher').css({
'left' : '20px',
'display' : 'none'
});
}
}
function validate() {
if (window.tries >= 4){
checkWin();
$('.screen').html('');
window.tries = 0;
$('.flasher').css({
'display' : 'block'
});
}
}
function checkWin() {
var w = $('.screen').html();
if (w == window.pass){
$('.success').show().delay(5000).queue(function(n) {
$('.success').hide(); n();
});
var u = window.redirectURL;
$(location).attr('href', u );
}
else {
$('.error').show().delay(1000).queue(function(n) {
$('.error').hide(); n();
});
}
}
#charset "UTF-8";
/* CSS Document */
/*basic reset*/
/*browsers have built in values for elements so we'll reset a few things to zero, you can add to this or remove items as needed*/
div,p,body,header,footer,section,article,nav
{
margin: 0;
padding: 0;
}
img
{
border: none;
margin: 0;
padding: 0;
}
/* html selectors */
body
{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #333;
background-color: #1d1d1d;
}
a:link, a:visited
{
text-decoration:none;
}
a:hover, a:active
{
text-decoration:none;
}
/* hide elements from browser but show for doc outline */
.hidden
{
display: none;
}
*
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body
{
background-color: #1d1d1d;
}
::selection
{
background-color: transparent;
}
.screen{
height: 75px;
width: 225px;
border-radius: 15px;
border: 8px solid #2b2b2b;
background-color: #111;
font-size: 50px;
color: limegreen;
padding: 0px 20px 0px 20px;
letter-spacing: 26px;
font-family: 'VT323', monospace;
position: relative;
}
.flasher {
content: "";
display: block;
width: 30px;
height: 5px;
background-color: limegreen;
position: absolute;
top: 55px;
left: 20px;
animation: blink 1s linear infinite;
-webkit-animation: blink 1s linear infinite;
}
.keypad_wrapper {
position: relative;
width: 225px;
height: 375px;
background-color: #2b2b2b;
margin: 100px auto;
}
.key {
width: 75px;
height: 75px;
float: left;
border-radius: 15px;
border: 8px solid #2b2b2b;
line-height: 58px;
text-align: center;
font-size: 50px;
background-color: #3b3b3b;
box-shadow: inset 0px -2px 0px rgba(0,0,0,.5), inset 0px 1px 0px rgba(255,255,255,.2);
cursor: pointer;
text-shadow: 0px -2px 2px rgba(0,0,0,.5), 0px 1px 2px rgba(255,255,255,.4);
color: #eee;
}
.key:hover {
background-color: #4b4b4b;
}
.key:active {
background-color: #333;
box-shadow: inset 0px -1px 0px rgba(255,255,255,.2), inset 0px 2px 0px rgba(0,0,0,.5);
color: #aaa;
line-height: 62px;
}
.key.last {
position: relative;
left: 75px;
}
.notification {
color: limegreen;
font-family: 'VT323', monospace;
text-align: center;
font-size: 40px;
position: absolute;
width: 225px;
top: 15px;
display: none;
}
#keyframes blink {
0%{opacity: 0;}
50%{opacity: 1;}
100%{opacity: 0;}
}
#-webkit-keyframes blink {
0%{opacity: 0;}
50%{opacity: 1;}
100%{opacity: 0;}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script src="main.js"></script>
</head>
<div class="keypad_wrapper">
<div class="screen"></div>
<div class="flasher"></div>
<div class="error notification">ERROR</div>
<div class="success notification">SUCCESS</div>
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key last">0</div>
</div>
</body>
</html>
Works in my browser, all I added to your code was:
<link rel="stylesheet" type="text/css" href="style.css" />
But I assume from your question that you had this working already.
You could try downloading jquery to your machine locally and referencing it locally. Perhaps it gets stuck there.
I have some images, I need to have a clickevent on them bringing up an infobox on each image.
$('.show-infobox').on('click', function() {
// Hide all infoboxes to prevent multiple showing at once
$('.infobox').addClass('hidden');
// Show infobox background
$('.infobox-container').removeClass('hidden');
// Show infobox matching last part of ID
$('#' + this.id.replace('show')).removeClass('hidden');
});
$('.hide-infobox').on('click', function() {
// Manually hide all infoboxes and background
$('.infobox-container').addClass('hidden');
$('.infobox').addClass('hidden');
}).children().on('click', function() {
return false;
});
#charset "utf-8";
.container {
height: 800px;
width: 1000px;
margin: 0;
}
body {
padding:0px;
width:100%;
}
header
{
top: 11px;
width: 100%;
padding-bottom: 10px;
}
#wrapper{
margin-left: auto;
margin-right: auto;
width: 1000px;
}
ol {
list-style-type: upper-roman;
}
H3 {
font-size:16px;
text-shadow: 0px 0px 5px grey;
}
.mainBox
{
background-color: #F0F0F0;
width: 700px;
box-shadow: 0px 0px 15px grey;
top: 310px;
border-radius: 20px;
padding-top: 30px;
padding-right: 50px;
padding-left: 50px;
}
.container nav ul {
list-style-type: none;
}
nav
{
width: 720px;
height:40px;
background-color: #F0F0F0;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 10px;
font-family: 'PT Sans';
font-size: 20px;
margin-bottom:50px;
}
ul{
padding-right: 20px;
margin-top: 6px;
}
a {
color: black;
text-decoration: none;
padding: 25px;
}
a:hover
{
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
.imagePack
{
float:left;
height: 300px;
width: 200px;
border-style:solid;
}
img.staff {
cursor: pointer;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img.staff:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.infobox-container {
background: rgba(0, 0, 0, .2);
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.infobox {
background: #fff;
display: inline-block;
padding: 2rem;
border: solid 1px #eee;
}
.show-infobox {
cursor: pointer;
}
.hidden {
display: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.4.js"></script>
<script>
$( document ).ready(function() {
$('.show-infobox').on('click', function() {
// Hide all infoboxes to prevent multiple showing at once
$('.infobox').addClass('hidden');
// Show infobox background
$('.infobox-container').removeClass('hidden');
// Show infobox matching last part of ID
$('#' + this.id.replace('show')).removeClass('hidden');
});
$('.hide-infobox').on('click', function() {
// Manually hide all infoboxes and background
$('.infobox-container').addClass('hidden');
$('.infobox').addClass('hidden');
}).children().on('click', function() {
return false;
});
});
</script>
<div id="wrapper">
<center><header><img src="Bilder/spegel.jpg"/></header></center>
</head>
<!--Bakgrundsbild-->
<center><body bgcolor="#FFFFFF ">
<!--Javascript-->
<!--Lådan som håller inne allt innehåll-->
<div class="container">
<!--Header-->
<!--Nedan skrivs innehål/text till sidan-->
<div class="mainBox">
<center><img src="Bilder/title.png"></center>
<p>
<div class="infobox-container hide-infobox hidden">
<div id="infobox-1" class="infobox hidden">This is infobox 1! <span class="hide-infobox">[close]</span></div>
<div id="infobox-2" class="infobox hidden">This is infobox 2! <span class="hide-infobox">[close]</span></div>
</div>
<span id="show-infobox-1" class="show-infobox">Show infobox 1</span>
<span id="show-infobox-2" class="show-infobox">Show infobox 2</span>
</div>
</body></center>
</div>
</html>
At the moment Im just trying to bring up the infobox on a simple text just to see if it works. But it doesn't. Only the container comes up without the actual infobox.
I am just showing how this can be done. Still you need to change your code a lot.
I suggest you to go through w3schools for better understanding.
This is DEMO
$(".infobox-container, .infobox").hide();
$(".show-infobox").click(function()
{
var curId = this.id;
if(curId == "show1")
{
$(".infobox-container, #infobox-1").fadeIn(100);
}
if(curId == "show2")
{
$(".infobox-container, #infobox-2").fadeIn(100);
}
});
$(".hide-infobox").click(function()
{
$(".infobox-container, .infobox").fadeOut();
});
#charset"utf-8";
.container {
height: 800px;
width: 1000px;
margin: 0;
}
body {
padding:0px;
width:100%;
}
header {
top: 11px;
width: 100%;
padding-bottom: 10px;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
ol {
list-style-type: upper-roman;
}
H3 {
font-size:16px;
text-shadow: 0px 0px 5px grey;
}
.mainBox {
background-color: #F0F0F0;
width: 700px;
box-shadow: 0px 0px 15px grey;
top: 310px;
border-radius: 20px;
padding-top: 30px;
padding-right: 50px;
padding-left: 50px;
}
.container nav ul {
list-style-type: none;
}
nav {
width: 720px;
height:40px;
background-color: #F0F0F0;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 10px;
font-family:'PT Sans';
font-size: 20px;
margin-bottom:50px;
}
ul {
padding-right: 20px;
margin-top: 6px;
}
a {
color: black;
text-decoration: none;
padding: 25px;
}
a:hover {
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
.imagePack {
float:left;
height: 300px;
width: 200px;
border-style:solid;
}
img.staff {
cursor: pointer;
opacity: 0.4;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}
img.staff:hover {
opacity: 1.0;
filter: alpha(opacity=100);
/* For IE8 and earlier */
}
.infobox-container {
background: rgba(0, 0, 0, .2);
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.infobox {
background: #fff;
display: inline-block;
padding: 2em;
border: solid 1px #eee;
}
.show-infobox {
cursor: pointer;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrapper">
<center>
<header>
<img src="Bilder/spegel.jpg" />
</header>
</center>
<center>
<!--Lådan som håller inne allt innehåll-->
<div class="container">
<!--Header-->
<!--Nedan skrivs innehål/text till sidan-->
<div class="mainBox">
<center>
<img src="Bilder/title.png" />
</center>
<p>
<div class="infobox-container">
<div id="infobox-1" class="infobox">This is infobox 1! <span class="hide-infobox">[close]</span></div>
<div id="infobox-2" class="infobox">This is infobox 2! <span class="hide-infobox">[close]</span></div>
</div>
</p>
<span class="show-infobox" id="show1">Show infobox 1</span>
<span class="show-infobox" id="show2">Show infobox 2</span>
</div>
</div>
</center>
</div>