resolvido Dúvida - Ação no botão

[Kap]

Olá.

 

Estou com uma dúvida: como coloco ação no botão?

Cód:

 

<button class="button" data-target="#teste"> <b> ver </b></button>

 

Botão no html:

http://prntscr.com/j2ceyt

 

Eu gostaria de saber como posso faze-lo abrir algo como isto:

http://prntscr.com/j2cfay

 

Não achei nada no google que ensinasse a fazer algo desse tipo.

Editado Abril 8, 2018 por Kap

[Luiiiz]

Nome disso é modal;

Fiz um seguindo o estilo do bootstrap(Usando HTML, CSS e JQuery).

Deixarei o código aqui em baixo. Só tentar entender.

 

Link: https://codepen.io/Luiiiiz/pen/GyoGmm

Editado Abril 12, 2018 por Luiiiz

[SnowRunescape]

opa beleza? você está usando bootstrap?

 

se sim, basta entrar no site de exemplos da bootstrap, ja tem MODAL feitos, so copiar e colar, e editar com sua preferencia...

 

caso não esteja usando bootstrap, segue esses passo abaixo:

 

importe a jquery ao seu arquivo html/php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Adicione isso ao seu botão:

href="#janela1" rel="modal"

Adicione isso ao corpo do seu site:

<div class="window" id="janela1">
    <a href="#" class="fechar">X Fechar</a>
    <h4>Primeira janela moda</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis auctor tempus. Lorem ipsum dolor sit amet,</p>
    <p>Morbi dui lacus, placerat eget pretium vehicula, mollis id ligula. Nulla facilisi. </p>
</div>
 
 
<!-- mascara para cobrir o site -->  
<div id="mascara"></div>

Adicione isso a sua css principal:

.window{
    display:none;
    width:300px;
    height:300px;
    position:absolute;
    left:0;
    top:0;
    background:#FFF;
    z-index:9900;
    padding:10px;
    border-radius:10px;
}
 
#mascara{
    display:none;
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
}
 
.fechar{display:block; text-align:right;}

O javascript, juntamente com o Jquery, que realizara a abertura e o fechamento do MODAL:

$(document).ready(function(){
    $("a[rel=modal]").click( function(ev){
        ev.preventDefault();
 
        var id = $(this).attr("href");
 
        var alturaTela = $(document).height();
        var larguraTela = $(window).width();
     
        //colocando o fundo preto
        $('#mascara').css({'width':larguraTela,'height':alturaTela});
        $('#mascara').fadeIn(1000); 
        $('#mascara').fadeTo("slow",0.8);
 
        var left = ($(window).width() /2) - ( $(id).width() / 2 );
        var top = ($(window).height() / 2) - ( $(id).height() / 2 );
     
        $(id).css({'top':top,'left':left});
        $(id).show();   
    });
 
    $("#mascara").click( function(){
        $(this).hide();
        $(".window").hide();
    });
 
    $('.fechar').click(function(ev){
        ev.preventDefault();
        $("#mascara").hide();
        $(".window").hide();
    });
});

http://www.botecodigital.info/jquery/criando-uma-janela-modal-simples-com-jquery/

[Kap]

 

opa beleza? você está usando bootstrap?

 

se sim, basta entrar no site de exemplos da bootstrap, ja tem MODAL feitos, so copiar e colar, e editar com sua preferencia...

 

caso não esteja usando bootstrap, segue esses passo abaixo:

 

importe a jquery ao seu arquivo html/php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Adicione isso ao seu botão:

href="#janela1" rel="modal"

Adicione isso ao corpo do seu site:

<div class="window" id="janela1">
    <a href="#" class="fechar">X Fechar</a>
    <h4>Primeira janela moda</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis auctor tempus. Lorem ipsum dolor sit amet,</p>
    <p>Morbi dui lacus, placerat eget pretium vehicula, mollis id ligula. Nulla facilisi. </p>
</div>
 
 
<!-- mascara para cobrir o site -->  
<div id="mascara"></div>

Adicione isso a sua css principal:

.window{
    display:none;
    width:300px;
    height:300px;
    position:absolute;
    left:0;
    top:0;
    background:#FFF;
    z-index:9900;
    padding:10px;
    border-radius:10px;
}
 
#mascara{
    display:none;
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
}
 
.fechar{display:block; text-align:right;}

O javascript, juntamente com o Jquery, que realizara a abertura e o fechamento do MODAL:

$(document).ready(function(){
    $("a[rel=modal]").click( function(ev){
        ev.preventDefault();
 
        var id = $(this).attr("href");
 
        var alturaTela = $(document).height();
        var larguraTela = $(window).width();
     
        //colocando o fundo preto
        $('#mascara').css({'width':larguraTela,'height':alturaTela});
        $('#mascara').fadeIn(1000); 
        $('#mascara').fadeTo("slow",0.8);
 
        var left = ($(window).width() /2) - ( $(id).width() / 2 );
        var top = ($(window).height() / 2) - ( $(id).height() / 2 );
     
        $(id).css({'top':top,'left':left});
        $(id).show();   
    });
 
    $("#mascara").click( function(){
        $(this).hide();
        $(".window").hide();
    });
 
    $('.fechar').click(function(ev){
        ev.preventDefault();
        $("#mascara").hide();
        $(".window").hide();
    });
});

http://www.botecodigital.info/jquery/criando-uma-janela-modal-simples-com-jquery/

 

Vamos por partes.

 

Importei o jquery e coloquei o javascript:

http://prntscr.com/j2gpzc

 

 Mudei o botão:

http://prntscr.com/j2gqbc

 

Coloquei o css:

http://prntscr.com/j2gqgl

 

E não abriu a janela.

[Kap]

Nome disso é modal;

Fiz um seguindo o estilo do bootstrap(Usando HTML, CSS e JQuery).

Deixarei o código aqui em baixo. Só tentar entender.

 

Link: https://codepen.io/Luiiiiz/pen/GyoGmm

Olá.

 

Funcionou a partes, olha: http://prntscr.com/j50sv9

 

Código html:  http://prntscr.com/j50t6t

 

O conteúdo das outras divs abaixo estão aparecendo na janela.

 

// Consegui, obrigado!

Editado Abril 14, 2018 por Kap

[Luiiiz]

 

Olá.

 

Funcionou a partes, olha: http://prntscr.com/j50sv9

 

Código html:  http://prntscr.com/j50t6t

 

O conteúdo das outras divs abaixo estão aparecendo na janela.

 

// Consegui, obrigado!

 

não há de que

[gmoehra]

Sua dúvida foi marcada como [Resolvido] e movido à área de dúvidas resolvidas.


Atenciosamente,
Gamer's Board