JavaScript pop -up um elemento div no centro da página da web
Este blog explicará os métodos para exibir um elemento div no centro da página da web em javascript.
Como aparecer um elemento div no centro da página da web em javascript?
Para exibir um elemento div no centro da página da web em JavaScript, os seguintes métodos podem ser aplicados:
- ““documento.QuerySelector ()”Método
- ““documento.getElementById ()”Método
- ““JQuery”
As abordagens mencionadas serão demonstradas uma a uma!
Método 1: pop -up um elemento div no centro da página da web em javascript usando o documento.Método querySelector ()
O "documento.QuerySelector ()”O método busca o primeiro elemento que corresponde ao seletor CSS correspondente. Este método pode ser utilizado para acessar o “div”Elemento para acessar as funcionalidades correspondentes e exibi -las.
Sintaxe
documento.QuerySelector (seletores CSS)Aqui, os seletores CSS consulte “div”, Que será acessado.
O exemplo a seguir explica o conceito declarado.
Exemplo
Em primeiro lugar, atribua o especificado “aula" e "eu ia”Para o elemento div adicionado. Para o pop-up, atribua a classe chamada “Aparecer”Para o elemento div. Em seguida, inclua um título especificado no “”Tag e botões separados para abrir e fechar o pop-up. Anexe também um “ONCLICK”Evento para ambos os botões que invocam as funções especificadas:
Este é um elemento div-up de divisão central
Depois disso, declare uma função chamada “opendiv ()"Para buscar o"div”Elemento passando seu ID no“documento.QuerySelector ()”Método e defina sua tela como“bloquear”Para iniciar o bloco em uma nova linha e aceitar a largura da tela:
função opendiv ()Let Get = Document.QuerySelector ('#div')
pegar.estilo.display = 'Block'
Da mesma forma, defina o “fechado ()”Funciona e repita as etapas acima para fechar o pop -up especificando“nenhum”Como o valor da propriedade Display:
função fechada ()Let Get = Document.QuerySelector ('#div')
pegar.estilo.display = 'nenhum'
Por último, estilo os divs adicionados de acordo com seus requisitos:
Pode -se observar que quando o “Mostrar pop-up”O botão é clicado, um novo elemento div é aparecido no centro da página da web:
Método 2: pop -up um elemento div no centro da página da web em javascript usando o documento.getElementById () método
O "documento.getElementById ()”O método recebe um elemento com o ID especificado. Este método pode ser implementado para acessar o ID especificado para abrir e fechar o pop -up criado.
Sintaxe
documento.getElementById (ElementId)Na sintaxe dada, “ElementId”Indica o ID do elemento específico que precisa ser buscado.
Exemplo
Em primeiro lugar, adicione duas divs como fizemos anteriormente. Em seguida, inclua uma imagem e especifique seu caminho junto com suas dimensões a serem contidas no pop -up. Depois disso, inclua os seguintes botões junto com um “ONCLICK”Evento, conforme discutido no método anterior:
Agora, nos métodos OpenDiv () e CloseV (), utilize o documento.getElementById () Método para acessar a div e definir seu valor de propriedade de exibição de acordo:
função opendiv ()Let Get = Document.getElementById ('div')
pegar.estilo.display = 'Block'
função fechada ()
Let Get = Document.getElementById ('div')
pegar.estilo.display = 'nenhum'
Por fim, estilo sua página da web de acordo com seus requisitos:
Saída
Método 3: pop -up um elemento div no centro da página da web em javascript usando jQuery
Neste método em particular, implementaremos a tarefa necessária aplicando “jQuery”Juntamente com seus métodos para mostrar e ocultar o pop -up criado.
O exemplo a seguir ilustra o conceito declarado.
Exemplo
Primeiro, inclua o “jQuery”Biblioteca na tag de script:
Da mesma forma, atribua a seguinte classe e ID ao “div”Elemento para o documento geral e pop -up, respectivamente. Em seguida, inclua o parágrafo a seguir dentro do pop -up. Além disso, repita os métodos discutidos para incluir os botões que invocam as funções especificadas ao desencadear o “ONCLICKEvento:
As páginas ou sites da web que você visita geralmente deixam o usuário esperar para exibir uma mensagem importante ou um aviso antes de acessar a página específica. Por exemplo, pedindo a um usuário para comprar a associação ou login antes de acessar o conteúdo do site. Além disso, o gerenciamento apropriado do tráfego no caso de sites educacionais
Mostrar pop-up
Agora, crie uma função chamada “opendiv ()"Que vai acessar o div ter"sobreposição”Id e aplique o“mostrar()”Método para exibir o pop -up criado:
função opendiv ()$ ('#struct').mostrar();
Para fechar o pop -up, defina a função chamada “fechado ()”E em sua definição de função, invocar o“esconder()”Método no ID acessado para fechar o pop -up:
função fechada ()$ ('#struct').esconder();
Por fim, estilize seu elemento de página da web de acordo:
Saída
Discutimos vários métodos criativos para exibir um elemento div no centro da página da web em JavaScript.
Conclusão
Para aparecer um elemento div no centro da página da web em JavaScript, aplique o “documento.QuerySelector ()”Método ou o“documento.getElementById ()”Método para buscar o div criado usando seu ID para aparecer. Além disso, você também pode utilizar o “jQuery”Biblioteca para incluir um elemento div na forma de um pop-up aplicando seus métodos internos. Este blog demonstrou os métodos que podem ser aplicados para exibir um elemento div no centro da página da web em JavaScript.