Fremad, men hvorfor ikke ikke bagud?
Første gang jeg prøver dette forum, men jeg er ikke den fødte programmør, så al hjælp er kærkommen.Jeg benytter dette simple setup til at lave overlay-popups, men kan af en eller anden grund kun klikke mig fremad, ikke tilbage, kan i hjælpe mig at få dette til at virke?
Håber jeg har lagt mit spørgsmål i den rigtige kategori?
<html>
<head>
<meta content="width=320px, initial-scale=1, user-scalable=yes" name="viewport" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// function to show our popups
function showPopup(whichpopup){
var docHeight = $(document).height(); //grab the height of the page
var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling
$('.overlay-bg').show().css({'height' : docHeight}); //display your popup background and set height to the page height
$('.popup'+whichpopup).show().css({'top': scrollTop+20+'px'}); //show the appropriate popup and set the content 20px from the window top
}
// function to close our popups
function closePopup(){
$('.overlay-bg, .overlay-content').hide(); //hide the overlay
}
// timer if we want to show a popup after a few seconds.
//get rid of this if you don't want a popup to show up automatically
//setTimeout(function() {
// Show popup3 after 2 seconds
// showPopup(3);
//}, 6000);
// show popup when you click on the link
$('.show-popup').click(function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var selectedPopup = $(this).data('showpopup'); //get the corresponding popup to show
showPopup(selectedPopup); //we'll pass in the popup number to our showPopup() function to show which popup we want
});
// hide popup when user clicks on close button or if user clicks anywhere outside the container
$('.close-btn, .overlay-bg').click(function(){
closePopup();
});
// hide the popup when user presses the esc key
$(document).keyup(function(e) {
if (e.keyCode == 27) { // if user presses esc key
closePopup();
}
});
});</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Helvetica Neue','Helvetica', Arial, sans-serif;
}
.main-content {
height: 800px;
width: 1000px;
margin: 0 auto;
}
.overlay-bg {
display: none;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
z-index: 1000; /* high z-index */
background: #000; /* fallback */
background: rgba(0,0,0,0.75);
}
.overlay-content {
display: none;
background: #fff;
padding: 1%;
width: 40%;
position: absolute;
top: 15%;
left: 50%;
margin: 0 0 0 -20%; /* add negative left margin for half the width to center the div */
cursor: default;
z-index: 10001;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
.close-btn {
cursor: pointer;
border: 1px solid #333;
padding: 2% 5%;
background: #a9e7f9; /* fallback */
background: -moz-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e7f9), color-stop(4%,#77d3ef), color-stop(100%,#05abe0));
background: -webkit-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
background: -o-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
background: -ms-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
background: linear-gradient(to bottom, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
border-radius: 4px;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.close-btn:hover {
background: #05abe0;
}
/* media query for most mobile devices */
@media only screen and (min-width: 0px) and (max-width: 480px){
.overlay-content {
width: 96%;
margin: 0 2%;
left: 0;
}
}
</style>
</head>
<body>
<div class="main-content">
<!-- Your Content Here -->
<p>Please <a class="show-popup" href="#" data-showpopup="1" >click here</a> to see the popup 1</p>
<p>Try <a class="show-popup" href="#" data-showpopup="2" >clicking here</a> to see the popup 2</p>
<p>Now try <a class="show-popup" href="#" data-showpopup="3" >clicking here</a> to see the popup 3</p>
</div>
<div class="overlay-bg">
</div>
<div class="overlay-content popup1">
<p>Oh My! This is a popup!</p>
<br>
<p>Please <a class="show-popup" href="#" data-showpopup="2" >Klik her </a> for næste produkt</p>
<br>
<p>Please <a class="show-popup" href="#" data-showpopup="3" >Klik her </a> for sidste produkt</p>
<button class="close-btn">Close</button>
</div>
<div class="overlay-content popup2">
<p>This is the content for Popup #2</p>
<br>
<p>Please <a class="show-popup" href="#" data-showpopup="1" >Klik her </a> for forrige produkt</p>
<br>
<p>Please <a class="show-popup" href="#" data-showpopup="3" >Klik her </a> for næste produkt</p>
<button class="close-btn">Close</button>
</div>
<div class="overlay-content popup3">
<p>This is the content for Popup #3</p>
<br>
<p>Please <a class="show-popup" href="#" data-showpopup="2" >Klik her </a> for forrige produkt</p>
<br>
<p>Please <a class="show-popup" href="#" data-showpopup="1" >Klik her </a> for første produkt</p>
<button class="close-btn">Close</button>
</div>
</body>
</html>
