jquery - Javascript - bring up infobox on click image -
i have images, need have clickevent on them bringing infobox on each image.
$('.show-infobox').on('click', function() { // hide infoboxes prevent multiple showing @ 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 infoboxes , 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; } { 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); /* ie8 , earlier */ } img.staff:hover { opacity: 1.0; filter: alpha(opacity=100); /* ie8 , 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 infoboxes prevent multiple showing @ 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 infoboxes , 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 infobox 1! <span class="hide-infobox">[close]</span></div> <div id="infobox-2" class="infobox hidden">this 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 moment im trying bring infobox on simple text see if works. doesn't. container comes without actual infobox.
i showing how can done. still need change code lot. suggest go through w3schools better understanding.
this 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; } { 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); /* ie8 , earlier */ } img.staff:hover { opacity: 1.0; filter: alpha(opacity=100); /* ie8 , 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 infobox 1! <span class="hide-infobox">[close]</span></div> <div id="infobox-2" class="infobox">this 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>
Comments
Post a Comment