2

Eu sou iniciante, e estou criando um site pessoal. Nele, quero colocar um estilo de modal com um produto para compra. Consegui achar algo que pelo menos se parece com um modal, mas estou tendo problemas.

Queria que esse modal só aparecesse no botão "Buy Single" (é um site de venda de músicas).

E também, que tivesse dentro desse modal um botão fechar, para o usuário abrir e fechar quando quisesse.

Já procurei, mas não funcionou.

Esse é um exemplo de modal (Coloquei um vídeo dentro, é onde estará o conteúdo.):

<table width="280" cellspacing="1" cellpadding="3" border="0" bgcolor="#1E679A">
<tr>
   <div id="1"><td bgcolor="#fff" style="padding: 25px 50px; border-radius: 5px;  position: fixed; 
  right: 300px; 
  bottom: 50px;
  z-index:10;"><iframe width="560" height="315" src="https://www.youtube.com/embed/fdiJ2y7m2tY" frameborder="0" allowfullscreen></iframe>
   </td></div>
</tr>
</table> 

Por favor, me ajudem. Preciso mesmo desse efeito, agradeço desde já.

2
  • Onde está o exemplo? Mostre algum código para mostrar o que já conseguiu. Commented 30/04/2015 às 0:40
  • Ali está ele. É Apenas o Modal. Mas o que eu quero é controlar quando ele aparece e desaparece com botões. Commented 30/04/2015 às 0:45

2 Respostas 2

1

Você pode fazer isso utilizando CSS, com o Bootstrap.

Neste link tem um tutorial sobre como implementar (em inglês), e abaixo segue um exemplo verificável que tentei adequar a sua situação. Clique em "Executar trecho de código" e depois em "Página toda" abaixo (porque o botão de fechar fica ocultado pelo "Página toda").

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".btn").click(function(){
		$("#myModal").modal('show');
	});
});
</script>
<style type="text/css">
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <a href="#" class="btn btn-lg btn-primary">Buy Single</a>
    
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Confirmar compra</h4>
                </div>
                <div class="modal-body">
                    <p><iframe width="560" height="315" src="https://www.youtube.com/embed/fdiJ2y7m2tY" frameborder="0" allowfullscreen></iframe></p>
</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    <button type="button" class="btn btn-primary">Confirmar</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>                                		

3
  • É Algo deste tipo que eu procuro, mas infelizmente, não funcionou no meu site: www.hugovales.esy.es Commented 30/04/2015 às 0:52
  • Hugo, este é um exemplo, você precisa seguir o tutorial pra aprender a implementar no seu site. Dei uma olhada no código do seu site, e parece que tem algumas inconsistências. E você incluiu desde o title até os links de css e javascript do modal (os específicos) no meio das divs. Neste caso tem que incluir os links entre as tags head e o title pode apagar). Tente utilizar uma IDE para identificar onde os problemas, inspecionando com o navegador pra ajudar. Qualquer coisa, pode postar outra pergunta com aquilo que estiver dando problema.
    – gustavox
    Commented 30/04/2015 às 1:43
  • 1
    Eu achei um tutorial e estou experimentando. O Meu Site está sendo feito com um construtor de sites. Eu tinha conseguido fazer o efeito fechar a div com botão antes, mas agora não consigo mais porque eu recomecei com um design novo. Mesmo assim, obrigado. Commented 30/04/2015 às 2:35
1

Eu faço assim usando Jquery tem alguns exemplo neste link. É um efeito elegante e você só precisa se preocupar com o conteúdo que está dentro da janela.

<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Modal message</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script>
    $(document).ready(function(){
       $("#dialog-message").hide();//Esconde dialog message para não exibir ao carregar pagina.
    });

   //Função exibi dialogo modal
   function exibirModal() {
       $( "#dialog-message" ).dialog({modal: true});
   };
   </script>

</head>
<body>

    <button onclick="exibirModal()">Exibir modal</button>

    <!-- DIV CONTEM O CONTEUDO DA JANELA MODAL-->
    <div id="dialog-message" title="Minha janela de dialogo">
        <p>Hello World!!</p>
    </div> 

</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .