×
Loading ...

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

Atualizado em 03 abril, 2017

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.

Instruções

A janela pop-up modal mostra textos e opções de confirmação aos usuários de Internet (Comstock/Comstock/Getty Images)
  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:

    Loading...
  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:

  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. >

    Texto de fundo

    Esses itens serão permanentemente excluídos e não poderão ser recuperados. Você tem certeza?

  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.

Loading...

Dicas

  • Uma vez colocadas as tags apropriadas, o exemplo completo do código modelo segue abaixo:
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  • <title>Modal Dialog Example</title>
  • <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>
  • <script>
  • $(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');
  • });
  • </script>
  • </head>
  • <body>
  • <p>Lots of text here. </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>
  • </html>

Aviso

  • 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.

Referências

Loading ...
Loading ...