🥇 Desfocando o conteúdo quando o diálogo é acionado

Às vezes, na IU da web ou o designer UX decide desfocar a página inteira quando uma caixa de diálogo é exibida. Acabei de escrever um pequeno script para criar esse efeito.

O CSS

.blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
filter: blur(3px);
}

Precisamos apenas criar uma classe de desfoque com o argumento de filtro blur (consulte as referências a outros filtros CSS3 aqui e aqui ). Este será aplicado ao nosso elemento contido via jQuery .

A caixa de diálogo pode ser semelhante a esta

.dialog-box {
      width: 300px;
      height: 350px;
      background: #fff;
      padding: 25px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
      position: fixed;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      margin-top: -175px;
}

HTML

A marcação HTML é fácil, vou apenas mostrar o gatilho da caixa de diálogo e a caixa de conteúdo da caixa de diálogo, o resto seria seu próprio artigo HTML ou qualquer outra coisa.

<!-- the trigger element -->
<a href="#" id="dialog-trigger" class="your-class">Trigger Dialog!</a>

<!-- the dialog box -->
<div id="dialog-box" class="dialog-box">
  <h3>Dialog Box!</h3> <a href="#" id="close" class="close">Close</a>
   <p> Your content goes here</p>
    <!-- all forms or whatever the box contains goes here, too -->
</div>

Essas duas marcações são necessárias para trabalhar com uma caixa de diálogo. A seguir, escreveremos um pouco de jQuery.

$(document).ready(function() {
  $('#dialog-box').hide();
  $('#dialog-trigger').click(function() {
    $('.wrapper').addClass('blur');
    $('#dialog-box').show(); 
  });

$('#close').click(function() {
    $('#dialog-box').hide();
    $('.wrapper').removeClass('blur');
    });
});

Este script cobre as seguintes etapas:

escondendo a caixa de diálogo primeiro
quando o gatilho é clicado
adicionar desfoque de classe ao invólucro
e mostrar a caixa de diálogo
quando fechar é clicado
esconder a caixa de diálogo
e remover desfoque de classe do invólucro

Acho que isso explica muito bem o que está acontecendo com esse script jQuery básico. Ele esconde a caixa primeiro, depois mostra a caixa quando necessário e aplica a classe de desfoque ao div de invólucro (como muitos web-designers / desenvolvedores, sempre contenho todos os meus elementos dentro de uma classe de invólucro).

Por que não aplique no corpo?

Primeiro tentei aplicar a classe de desfoque ao corpo, mas acabou uma bagunça (veja a imagem abaixo).

bagunçado

O resultado

É isso aí. Você não precisa de mais nada, você pode ver um exemplo ao vivo aqui no CodePen ou ver as imagens abaixo que mostram os dois estados.

página normal
página borrada

O resultado

Related Posts