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

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](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.