fdaciuk · December 22, 2015 19:59
diff --git a/popup.html b/popup.html
 <!DOCTYPE html>
 <html lang="pt-br">
 <head>
  <meta charset="utf-8" />
  <title>Abrir/fechar pop-up</title>
 </head>
 <body>
  <ul>
    <li class="container-box-to-open">
      <a class="el-open-box">Abrir Pop-up</a>

      <div class="popup box-to-open">
        POPUP
      </div> <!-- .box-to-open -->
    </li> <!-- .container-box-to-open -->
  </ul>
 </body>
 </html>
diff --git a/popup.js b/popup.js
 ;(function( window, document, $, undefined ) {

  var obj = (function() {

    var box_array = [];

    return {

      /*--------------------------------------------------------------------------------------
       *
       * @name: init
       * @description: Todas as funções que devem iniciar ao carregar o site
       *
       *-------------------------------------------------------------------------------------*/
      init : function() {

        // Inicializar variáveis
        this.init_vars();

        // Iniciar eventos
        this.init_events();

      }, // init










      /*--------------------------------------------------------------------------------------
       *
       * @name: init_vars
       * @description: Inicializar variáveis
       *
       *-------------------------------------------------------------------------------------*/
      init_vars : function() {

        box_array = [
          $( '.container-box-to-open' )[0],
          $( '.box-to-open' )[0]
        ];

      }, // init_vars










      /*--------------------------------------------------------------------------------------
       *
       * @name: init_events
       * @description: Eventos
       *
       *-------------------------------------------------------------------------------------*/
      init_events : function() {

        $( document ).on({
          keydown  : this.close_box,
          click    : this.close_box
        });




        $( 'a.el-open-box' ).on( 'click', function( e ) {
          e.preventDefault();
          e.stopPropagation();

          var $this = $( this ),
            $cont_box_open = $this.closest( '.container-box-to-open' );

          obj.open_box( $cont_box_open );
        });





        $( '.box-to-open' ).on( 'click', function( e ) {
          e.stopPropagation();
        });

      }, // init_events










      /*--------------------------------------------------------------------------------------
       *
       * @name: open_box
       * @description: Abrir boxes
       *
       * @param {jQuery Object} el Elemento jQuery do box que terá a classe alternada
       *
       *-------------------------------------------------------------------------------------*/
      open_box : function( el ) {

        console.log( 'Open box' );

        // Fechar se tiver algum box aberto
        $( '.container-box-to-open' ).not( el[0] ).removeClass( 'active' );

        if( el.hasClass( 'active' ) ) {
          el.removeClass( 'active' );
          $( document ).off( 'click' );
          return false;
        }

        el.addClass( 'active' );

        $( document ).on( 'click', function( e ) {
          e.preventDefault();

          if( $.inArray( e.target, box_array ) < 0 ) {
            el.removeClass( 'active' );
            $( this ).off( 'click' );
          }
        });

      }, // open_box










      /*--------------------------------------------------------------------------------------
       *
       * @name: close_box
       * @description: Fechar box
       *
       * @param {Object} e Dados do evento
       *
       *-------------------------------------------------------------------------------------*/
      close_box : function( e ) {

        var $cont_box = $( '.container-box-to-open' ),
          $box_to_open = $( '.box-to-open' );

        if( $box_to_open.is( ':visible' ) ) {
          var keyCode = e.keyCode || e.which;

          if( keyCode === 27 ) {
            $cont_box.removeClass( 'active' );
            $( document ).off( 'click' );
          }
        }

      } // close_box

    }; // return
  })(); // obj



  // DOM Loaded
  $(function() {
    obj.init();
  });

 })( window, document, jQuery );