Thread: Jquery Modal Box with Arrow Key control - Snippet

Results 1 to 3 of 3
  1. #1 Jquery Modal Box with Arrow Key control - Snippet 
    Registered Member
    Luq.'s Avatar
    Join Date
    Dec 2011
    Posts
    530
    Thanks given
    1,073
    Thanks received
    336
    Rep Power
    2760
    JQuery Modal Box with Arrow Key Control - Snippet

    What you'll be creating: CodePen - A Pen by Luqman Yasin
    An exact replica of the preview page: A Pen by Luqman Yasin
    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
    Reply With Quote  
     

  2. #2  
    anInt69

    Max _'s Avatar
    Join Date
    Feb 2012
    Age
    26
    Posts
    1,801
    Thanks given
    426
    Thanks received
    727
    Rep Power
    599
    nice1
    Reply With Quote  
     

  3. #3  
    Registered Member
    Join Date
    Dec 2010
    Posts
    10
    Thanks given
    0
    Thanks received
    1
    Rep Power
    1
    very nice


    Reply With Quote  
     


Thread Information
Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)


User Tag List

Similar Threads

  1. First 317 with minimap key... [REPOST]
    By Snow Cat123 in forum Show-off
    Replies: 11
    Last Post: 08-08-2009, 02:23 PM
  2. First 317 with MiniMap Key
    By Snow Cat123 in forum Show-off
    Replies: 8
    Last Post: 07-27-2009, 10:47 PM
  3. Perfect chat box,With tabs!
    By SWAT in forum Show-off
    Replies: 24
    Last Post: 03-08-2009, 03:20 PM
  4. make archers att with arrows
    By Chronos in forum Tutorials
    Replies: 26
    Last Post: 03-02-2008, 01:40 PM
Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •