Como faço para que meu Lightbox Popup apareça no centro na tela?

Escrito por robert godard | Traduzido por renato martin
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como faço para que meu Lightbox Popup apareça no centro na tela?
Use Lightbox para criar uma galeria interativa em o seu site (Comstock Images/Comstock/Getty Images)

Um lightbox é um código JavaScript que pode ser usado para exibir uma imagem em uma caixa de pop-up, em vez de abrir uma janela nova. O código é escrito de forma que muitas das suas características possam ser editadas, incluindo o tamanho e a posição e a legenda. Por padrão, um lightbox deverá aparecer no centro da tela. Se isso não estiver acontecendo, há uma maneira de forçar este posicionamento central usando o código CSS.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

O que você precisa?

  • Editor de texto
  • Lightbox

Lista completaMinimizar

Instruções

  1. 1

    Baixe o Lightbox de seu site oficial. Este download incluirá os arquivos JavaScript que precisará para executar o Lightbox, bem como o código CSS que poderá ser usado para alterar sua aparência.

  2. 2

    Abra seu editor de texto, como o Bloco de Notas ou outro. Selecione "Arquivo" no menu superior, em seguida, selecione "Abrir". Navegue até a pasta em que você baixou o Lightbox, e em seguida, clique em "lightbox.css" para abrir este arquivo. Isto abrirá a página de estilo CSS.

  3. 3

    Encontre a seção iniciada com "#lightbox". Ela controla a aparência da caixa que aparece na tela. Após o "{" adicione o código:

    position:fixed; top:0; left:0;

    Certifique-se de fechar com "}". Isto dará à sua lightbox uma posição fixa, não importando em qual navegador esteja. As designações "top" (superior) e "left" (esquerda) significam que ela não se moverá do centro. Se desejar movimentá-la, insira valores positivos ou negativos nos campos "top" e "left".

  4. 4

    Salve o arquivo, clicando em "Arquivo" e depois "Salvar". Carregue todos os arquivos para o seu servidor de internet e será capaz de usar o Lightbox com um pop-up fixo no centro da tela, em qualquer lugar em seu site.

Dicas & Advertências

  • Você também poderá definir outros parâmetros para seu lightbox na sua página de estilo CSS, como a cor.

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