Code:
<div class="button" data-name="name">Show Modal Box</div>
<div id="bg">
<div class="button_close" data-name="name" data-first="first">Close</div>
<div class="popups">
<div class="name first popup">
A modal used to preview various slides at once, with arrow key compatibility.
</div>
<div class="name popup">
Text box 2
<br />
<br />
<br />
<br />
<br />
</div>
<div class="name popup">
<img src="http://thinkte.ch/banner_no-bg1.png" />
</div>
</div>
<div class="btns-nav">
<div class="button_prev nav-btn" data-name="name">
<</div>
<div class="button_next nav-btn" data-name="name">></div>
</div>
</div>
Code:
.popup {
background: #111;
color: #eee;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 24px 12px;
box-sizing: border-box;
border-radius: 2px;
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 4px 0px 2px rgba(0, 0, 0, 0.1);
width: 50%;
margin: 50px auto;
font-family: tahoma;
z-index: 99999999;
}
#bg {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
z-index: 9999999;
}
.nav-btn {
display: inline;
}
.btns-nav {
margin: 0 auto;
text-align: Center;
}
.button,
.button_close,
.button_next,
.button_prev {
padding: 10px;
background: rgba(0, 1, 17, 0.5);
color: #fff;
text-transform: uppercase;
font-family: tahoma;
border: 1px solid rgba(0, 0, 0, 0.2);
width: 200px;
text-align: center;
margin: 0 auto;
transition: 0.5s;
}
.button:hover,
.button_close:hover,
.button_next:hover,
.button_prev:hover {
background: rgba(0, 1, 17, 0.7);
}
.button_close {
margin-top: 8px;
}
Code:
$(document).ready(function() {
var count = 0;
$('.button').click(function() {
if (count != 0) {
$(".popups .popup:first").fadeIn();
}
count = 1;
var first = $(this).data("first");
$('.' + first).fadeIn();
$('#bg').fadeIn();
$('.button_close').fadeIn();
});
$(".popups .popup").each(function(e) {
if (e != 0)
$(this).hide();
});
$('.button_close').click(function() {
var name = $(this).data("name");
$('.' + name).hide();
$('#bg').fadeOut();
// $('.popups').fadeOut();
$('.button_close').fadeOut();
});
$('.button_next').click(function() {
if ($(".popups .popup:visible").next().length != 0)
$(".popups .popup:visible").next().show().prev().hide();
else {
$(".popups .popup:visible").hide();
$(".popups .popup:first").fadeIn();
}
return false;
});
$('.button_prev').click(function() {
if ($(".popups .popup:visible").next().length != 0)
$(".popups .popup:visible").next().show().prev().hide();
else {
$(".popups .popup:visible").hide();
$(".popups .popup:first").fadeIn();
}
return false;
});
$('html').keydown(function(e) {
if (e.which == 37) {
if ($(".popups .popup:visible").next().length != 0)
$(".popups .popup:visible").next().show().prev().hide();
else {
$(".popups .popup:visible").hide();
$(".popups .popup:first").fadeIn();
}
return false;
}
if (e.which == 39) {
if ($(".popups .popup:visible").next().length != 0)
$(".popups .popup:visible").next().show().prev().hide();
else {
$(".popups .popup:visible").hide();
$(".popups .popup:first").fadeIn();
}
return false;
}
});
});