Jquery Modal Box with Arrow Key control - Snippet

JQuery Modal Box with Arrow Key Control - Snippet

What you'll be creating: [Only registered and activated users can see links. Click Here To Register...]
An exact replica of the preview page: [Only registered and activated users can see links. Click Here To Register...]
Or stripped down version without the random stuff.

Spoiler for Snippets:

HTML:
[SPOIL]

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>

---

[/SPOIL]
CSS:
[SPOIL]

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;
}

---

[/SPOIL]
JQuery:
[SPOIL]

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;
    }
  });
});

---

[/SPOIL]

This is kind of based on my previous release, but not really, if you get me :D

nice1

very nice