How can I make this div disappear?

Question

How can I make this div disappear?

Navigation

#1 by (1 votes)
#2 by (1 votes)

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 modal , but I'm having problems.

I wanted this mode to appear only on the "Buy Single" button.

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

I've tried, but it did not 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. I really need this effect, thank you right away.

html

asked by anonymous 30.04.2015 / 02:15

2 answers

Why does not my regEx work as expected? Concatenate hierarchy

score 1 · Answer 1

You can do this using CSS , with Bootstrap .

This link has a tutorial on how to implement (in English), and below follows a verifiable example that has tried to fit your situation. Click "Run code snippet" and then "All page" below (because the close button is hidden by the "All 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><scriptsrc="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>

score 1 · Answer 2

I do so using Jquery has some examples in this link . It's a stylish effect and you just have 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>