Criar um pop up como no exemplo abaixo

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Criar um pop up como no exemplo abaixo

Mensagem por EDU2010 13.03.24 15:02

Detalhes da questão


Endereço do fórum: https://www.criadoresdepassaros.com/
Versão do fórum: ModernBB

Descrição


Como criar um pop up  como no exemplo abaixo , o qual pega a pagina toda do forum e pro usuario dar continuidade precisa fechar o mesmo no X , no centro colocarei um anuncio como na imagem do exemplo :


Segue exemplo :


Criar um pop up como no exemplo abaixo  Exempl10
EDU2010

EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2297
Pontos : 3605

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Criar um pop up como no exemplo abaixo

Mensagem por tikky 14.03.24 2:16

Olá @Edu2010

Utilize o seguinte código em qualquer template (Recomendado no Overall_header):
Código:
<style>
    #ads-popup {
    background-color: #f0f0f0;
    border-color: #3793ff;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 36px rgba(0, 0, 0, 0.3), 0 0 3px 1px rgba(0, 0, 0, 0.2);
    font-size: 1.3rem;
    padding: 18px;
    transition: none;
        position: fixed;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform:translate(-50%, -50%);
    min-width: 40%;
text-align: center;
}
  </style>
 
 
 
<div id="ads-popup" style="z-index: 10000 !important;">
  <span style="position: absolute; right: 2rem; font-size: 1.75rem; color: tomato; font-weight: 700; top: .5rem; cursor: pointer;" onClick="parentNode.style.display = 'none'">x</span>
  <p>Conteúdo aqui</p>

</div>
Atenciosamente,
tikky.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7826
Pontos : 9068

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar um pop up como no exemplo abaixo

Mensagem por EDU2010 14.03.24 12:25

Bom dia , Funcionou a unica alteração que eu queria é que o o pop up cubrisse a pagina toda ficando o X para fechar na lateral acima no canto direito da pagina e o anuncio apaneas no centro conforme imagem de exemplo , observe que ela desfoca ( cobre toda pagina do site )


EDU2010

EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2297
Pontos : 3605

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Criar um pop up como no exemplo abaixo

Mensagem por tikky 19.03.24 1:53

@EDU2010: Altere o código para
Código:
  <style>
    #ads-popup {
    position: fixed;
    top: 0;
    z-index: 99999999;
    height: 100vh;
    width: 100%;
    background-color: rgba(255 255 255/ .25);
    -webkit-backdrop-filter: blur(40px);
    display: flex;
    justify-content: center;
    align-items: center;
    }
    #ads-popup .content {
    background-color: #f0f0f0;
    border-color: #3793ff;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 36px rgba(0, 0, 0, 0.3), 0 0 3px 1px rgba(0, 0, 0, 0.2);
    font-size: 1.3rem;
    padding: 18px;
    transition: none;
    text-align: center;
    width: 50%;
}
  </style>
 
 
 
<div id="ads-popup">
 
  <span style="position: absolute; right: 2rem; font-size: 1.75rem; color: tomato; font-weight: 700; top: .5rem; cursor: pointer;" onClick="parentNode.style.display = 'none'">x</span>

  <div class="content">
    <p>Conteúdo aqui</p>

</div>
  </div>
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7826
Pontos : 9068

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar um pop up como no exemplo abaixo

Mensagem por EDU2010 21.03.24 21:36

tikky escreveu:@EDU2010: Altere o código para
Código:
  <style>
    #ads-popup {
    position: fixed;
    top: 0;
    z-index: 99999999;
    height: 100vh;
    width: 100%;
    background-color: rgba(255 255 255/ .25);
    -webkit-backdrop-filter: blur(40px);
    display: flex;
    justify-content: center;
    align-items: center;
    }
    #ads-popup .content {
    background-color: #f0f0f0;
    border-color: #3793ff;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 36px rgba(0, 0, 0, 0.3), 0 0 3px 1px rgba(0, 0, 0, 0.2);
    font-size: 1.3rem;
    padding: 18px;
    transition: none;
    text-align: center;
    width: 50%;
}
  </style>
 
 
 
<div id="ads-popup">
 
  <span style="position: absolute; right: 2rem; font-size: 1.75rem; color: tomato; font-weight: 700; top: .5rem; cursor: pointer;" onClick="parentNode.style.display = 'none'">x</span>

  <div class="content">
    <p>Conteúdo aqui</p>

</div>
  </div>



Boa tarde , nesse código não tem o botão de fechar , e nem mesmo um tempo automatico para que fechasse sozinho ...
EDU2010

EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2297
Pontos : 3605

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Criar um pop up como no exemplo abaixo

Mensagem por Sleep 22.03.24 12:42

Olá @EDU2010,

Substitua o código acima, por este:

Código:
  <style>
    #ads-popup {
    position: fixed;
    top: 0;
    z-index: 99999999;
    height: 100vh;
    width: 100%;
    background-color: rgba(255 255 255/ .25);
    -webkit-backdrop-filter: blur(40px);
    display: flex;
    justify-content: center;
    align-items: center;
    }
    #ads-popup .content {
    background-color: #f0f0f0;
    border-color: #3793ff;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 36px rgba(0, 0, 0, 0.3), 0 0 3px 1px rgba(0, 0, 0, 0.2);
    font-size: 1.3rem;
    padding: 18px;
    transition: none;
    text-align: center;
    width: 50%;
}
  </style>
 
 
 
<div id="ads-popup" style="z-index: 10000 !important;">
        <span id="close-button" style="position: absolute; right: 2rem; font-size: 1.75rem; color: tomato; font-weight: 700; top: .5rem; cursor: pointer;" aria-label="Fechar anúncio">x</span>
 
  <div class="content">
    <p>Conteúdo aqui</p>
 
</div>
  </div>

Atenciosamente,
Sleep
Sleep

Sleep
Ajudeiro
Ajudeiro

Membro desde : 10/08/2012
Mensagens : 1109
Pontos : 1341

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar um pop up como no exemplo abaixo

Mensagem por EDU2010 26.03.24 13:22

Mesmo resultado , não tem o X para fechar e nem mesmo fecha também automatico ..
EDU2010

EDU2010
Hiper Membro

Membro desde : 09/12/2010
Mensagens : 2297
Pontos : 3605

http://passarinhos.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Criar um pop up como no exemplo abaixo

Mensagem por Sleep 02.04.24 6:11

Tópico resolvido


Tópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão.
Sleep

Sleep
Ajudeiro
Ajudeiro

Membro desde : 10/08/2012
Mensagens : 1109
Pontos : 1341

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos