Como impedir o rolamento do fundo de tela ao usar Modal Dialog no jQuery

Escrito por max power | Traduzido por eudes filho gomes
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como impedir o rolamento do fundo de tela ao usar Modal Dialog no jQuery
A janela pop-up modal mostra textos e opções de confirmação aos usuários de Internet (Comstock/Comstock/Getty Images)

Um desenvolvedor web pode se beneficiar da técnica de janela pop-up modal para apresentar o conteúdo aos visitantes do seu site. Ela é uma estratégia de design Web 2.0 frequentemente usada. Porém, quando aparece sobre páginas múltiplas de conteúdo de fundo, o usuário pode colocá-la para fora da tela, ao descer a barra de rolagem. Como muitas janelas modais fazem com que o fundo fique parcialmente apagado, o usuário poderia potencialmente navegar através de páginas com conteúdo desvanecido. Usando o método jQuery’s .css(), o desenvolvedor web pode esconder esse transbordamento e mantê-la centralizada na tela.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Inclua um código jQuery e um script de janela modal. Esse exemplo usa a janela modal de confirmação do plug-in de interface do jQuery. Este exemplo foi modelado com o "jQuery UI’s cupertino theme". O código completo está disponível na API de desenvolvedores da Google: <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  2. 2

    Escreva o código jQuery. Aqui está um exemplo de um código padrão de demonstração para a implementação de uma janela de confirmação modal da interface do jQuery: <script> $(function() { $( "#dialog-confirm" ).dialog({ resizable: false, height:140, modal: true, buttons: { "Delete todos os itens": function() { $( this ).dialog( "Fechar" ); }, Cancel: function() { $( this ).dialog( "Fechar" ); } } }); }); </script>

  3. 3

    Escreva o código HTML. A div de dialog-confirm corresponde ao código de demonstração usado pela implementação do diálogo de confirmação modal da interface do jQuery. <body> <p>Texto de fundo</p> <div id="dialog-confirm" title="Esvaziar a lixeira?"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Esses itens serão permanentemente excluídos e não poderão ser recuperados. Você tem certeza?</p> </div> </body>

  4. 4

    Edite o código jQuery para esconder o conteúdo excedente. Quando a janela de diálogo é selecionada, você deve usar o método jQuery.css() para mudar o elemento de propriedade de overflow, para "hidden". Isso ocultará todo o conteúdo excedente de fundo sempre que uma janela modal aparecer. É importante usar o método .css() para recuperar a propriedade de overflow, para o uso após a janela modal ser fechada pelo usuário. Esse exemplo expande o código jQuery para ocultar o excesso na ativação e subsequentemente restaurar a barra de rolagem sempre que o usuário clicar em um botão e fechar a janela. <script> $(function() { $( "#dialog-confirm" ).dialog({ resizable: false, height:140, modal: true, buttons: { "Deletar todos os itens": function() { $('body').css('overflow','scroll'); $( this ).dialog( "close" ); }, Cancel: function() { $('body').css('overflow','scroll'); $( this ).dialog( "close" ); } }

    }); $('body').css('overflow','hidden'); }); </script>

Dicas & Advertências

  • Uma vez colocadas as tags apropriadas, o exemplo completo do código modelo segue abaixo:
  • Modal Dialog Example
  • $(function() {
  • $( "#dialog-confirm" ).dialog({
  • resizable: false,
  • height:140,
  • modal: true,
  • buttons: {
  • "Delete todos os itens": function() {
  • $( this ).dialog( "close" );
  • },
  • Cancel: function() {
  • $('body').css('overflow','scroll');
  • $( this ).dialog( "close" );
  • }
  • }
  • });
  • $('body').css('overflow','hidden');
  • });
  • Lots of text here.
  • Esses itens serão permanentemente excluídos e não poderão ser recuperados. Você tem certeza?
  • Algumas versões antigas do navegador Internet Explorer podem exigir que o atributo altura do elemento "body" seja determinado, devido ao estabelecimento de uma configuração de overflow. Se portabilidade com navegadores antigos for importante, você pode pensar em envolver todo o conteúdo do "body" com uma div e usar o método .css() para modificar as propriedades de overflow dessa div quando a janela modal aparecer.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível