How can I make this div disappear?

Asked

Viewed 1,755 times

2

I’m a beginner, and I’m creating a personal website. In it, I want to put a style of modal with a product to buy. I was able to find something that at least looks like a modal, but I’m having problems.

I wish this modal only appeared on the "Buy Single" button (it’s a music sales site).

And also, that had inside this modal a close button, for the user to open and close whenever he wanted.

I looked, but it didn’t work.

This is an example of modal (I put a video inside, that’s where the content will be.):

<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>

Please, help me out. I really need that effect, thank you in advance.

html

  • Where is the example? Show some code to show what you have already achieved.

  • There it is. It’s just Modal. But what I want is to control when it appears and disappears with buttons.

2 answers

1

You can do this using CSS, with the Bootstrap.

At this link has a tutorial on how to implement (in English), and below follows a verifiable example that I tried to adapt to your situation. Click on "Execute code snippet" and then on "Whole Page" below (because the close button is hidden by "Whole Page"). 

<!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>

  • It’s something like this that I’m looking for, but unfortunately, it didn’t work on my site: www.hugovales.esy.es

  • Hugo, this is an example, you need to follow the tutorial to learn how to implement on your site. I took a look at the code of your site, and it seems that there are some inconsistencies. And you included since the title up to the links of css and javascript of modal (the specifics) in the middle of divs. In this case you have to include links between tags head and the title can delete). Try using an IDE to identify where problems are, inspecting with the browser to help. Anything, you can post another question with whatever’s giving you trouble.

  • 1

    I found a tutorial and am experimenting. My Site is being done with a website builder. I had managed to make the effect close the div with button before, but now I can’t anymore because I started with a new design. Even so, thank you.

1

I do so using Jquery has some example in this link. It is a stylish effect and you just need to worry about the content that is inside the window.

<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>

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.