Ajuda em web programação [Formas de Pagamento pop up modal]!!!

[babylon 0]

Ola amigos,

 

Estava querendo criar algo para meu site, um botao igual do site abaixo para calcular formas de pagamento "ver formas de pagamento":

 

https://www.chipart.com.br/pc-gamer-level-one-black-amd-3400g

 

Segue imagem em anexo.

 

Alguem poderia me ajudar se tem algum script algo pronto ou que ajude para abrir pop up modal?

 

Obrigado a todos.

 

 

[Omar~ 87]

Se for só pela questão de um "modal" fica fácil te ajudar, mas se entramos no meios de "pagamento/valores de produto" complica porque teríamos que ter os mínimos detalhes do seu modelo de negócio.

 

Ao modal. 99% CSS, 0,9% HTML e 0,1% javascript.

 

Começando pelo html:

Criamos duas tag DIV elas ão ficar no fim do escopo do documento html, basicamente uma div mãe e uma filha.

A mãe vai ser o modal em sí "o plano de fundo" e a filha vai ser a caixa interna.

<div id="modal">
    <div class="conteudo_modal">
        Aqui dentro você pode colocar qualquer outra tag ou qualquer outra coisa que você querer
    </div>
</div>

Para o CSS

Na mãe temos que sobrepor ela a todo conteúdo do documento por isso usando os valores fixed e z-index, sendo o fixed para que possa acompanhar a página e o z-index para cobrir.

Como plano de fundo da mãe podemos usar o preto rgb em alpha.

Já a filha colocamos um plano de fundo branco definimos sua altura e largura conforme o desejado.

#modal {
    z-index: 1; /* Se houver outro z-index esse valor aqui tem que ser maior */
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.5)
}
#modal > .conteudo_modal {
    height: calc(100% - 20px);
    max-width: 300px;
    background-color: #fff;
    margin: 10px
}

Com isso você já pode está personalizando seu modal aí conforme seu gosto antes de prosseguir adicionar cabeçalho, botão de fechar e tudo mais.

 

Agora vamos esconder ele porque o usuário vai clicar em algo para mostrar então adicionamos isso ao css....

#modal.esconder {
    display: none
}

E adicionamos esse classificado na tag cujo colocamos o identificador #modal

<div id="modal" class="esconder">

 

Agora o javascript:

Basicamente é localizar o #ID modal e remover ou adicionar o classificador esconder.

function controleModal() {
    document.getElementById('modal').classList.toggle('esconder');
}

Então é só colocar o evento "click" em um botão.

O próprio botão de fechar pode usar a mesma função.

<button onclick="controleModal()">Exemplo</button>

 

Por fim vamos supor que eu precise do modal para vários produtos, eu não precisaria criar um modal para cada e sim ter uma função que modelasse o conteúdo conforme minha necessidade.

Então nesse exemplo abaixo todo o código usando apenas um modal para mais de um suposto produto, o que também poderia ser para qualquer outra coisa.

Spoiler

<style>
    #modal {
        z-index: 1;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,.5)
    }
    #modal > .conteudo_modal {
        height: calc(100% - 20px);
        max-width: 300px;
        background: #fff;
        margin: 10px
    }
    #modal.esconder {
        display: none
    }
</style>

<div id="modal" class="esconder">
    <div class="conteudo_modal">
        <button onclick="controleModal()">Fechar</button>
        <div id="conteudos_aqui"></div>
    </div>
</div>

<button onclick="mostraProduto('casa')">Mostre Casa</button>
<button onclick="mostraProduto('carro')">Mostre Carro</button>

<script>
    var produtos = {
        casa: ['100.000,00', 'Dois quartos e sala de está'],
        carro: ['25.000,00', 'Ano 2010 e IPVA pago']
    };
    
    function mostraProduto(produto) {
        var conteudos = document.getElementById('conteudos_aqui');
        var nome = null;
        var preco = null;
        var descricao = null;
        for (var [chave, valor] of Object.entries(produtos)) {
            if (produto == chave) {
                nome = document.createElement('h1');
                preco = document.createElement('p');
                descricao = document.createElement('article');
                
                nome.innerHTML = chave;
                preco.innerHTML = valor[0];
                descricao.innerHTML = valor[1];
            }
        }
        conteudos.innerHTML = null;
        conteudos.appendChild(nome);
        conteudos.appendChild(preco);
        conteudos.appendChild(descricao);
        controleModal();
    }

    function controleModal() {
        document.getElementById('modal').classList.toggle('esconder');
    }
</script>

 

Lógico que isso é um exemplo genérico, apenas para mostrar uma forma de criar diferentes coisas sem precisar ficar replicando código.

 

 

E é simples um modal não é nada mais que que um elemento que você oculta ou esconde conforme for a questão.

Veja esse: https://github.com/Spell-Master/sm-web/tree/master/javascript/ModalShow

Nesse script você tem algumas outras funcionalidades para o modal, basta que você edite o CSS conforme desejar.