jQuery Focus Element Beta

This is the first version, so I'll leave it automated.

Jquery Plugin to focus on desired elements leaving the remaining with a black background or the color you want.

As still in beta step 4 is extremely important

Installation

1 - download the file and place it where you want

2 - Preference use require JS

3 - create a div in your code with the name focus-effect

4 - in your css add:

 .focus-effect{ 
    position: fixed;
    cursor: pointer;
    background-color: rgba(0,0,0,.4);
    height: 100%;
    width: 100%;
    z-index: 90;
    top: 0;
    opacity: 0;
    left: 0;
    visibility: hidden;
    transition: 0.2s;
}
.focus-effect.active{
    display: block !important;
    opacity: 1;
    visibility: visible;
}

.object.active{
    position: relative;
    z-index: 100;
}

5 - in your JS:

    $(document).on('click', '.focus-effect.ativo', function() {
        $(document).focus('hideBackground');
    });

6 - There is 5 methods:

6.1 - show: it does the click function on the selected object. ex:

  $('.field.search').focus('show', '.block-search');

6.2 - showManual: You have to do the function you want and than you have it inside. ex:

  $('input').on('click' function(){
    $(document).focus('showManual', '.block-search');
  }) 

6.3 - hide: do the click function and remove the background. ex:

  $('.field.search').focus('hide', '.block-search');

6.4 - hideManual: For manual removal of the selected background and object. ex:

  $('input').on('click' function(){
    $(document).focus('hideManual', '.block-search');
  })

6.5 - hideBackground: It removes only the background (as it is still in the beta it is necessary to manually do this function).