Pop-up opening before being clicked by button

Asked

Viewed 460 times

4

I wanted to use a popup on a div but it turns out the div popup appears on the page, without being clicked by the button. When it was opened wanted to make dark back and blocked. I tried that: 

<div id='abc'>
   (...)

    <div id="popup">
        <label> Popup </label>
    </div>  

    <button id="popup" onclick="div_show()">Popup</button></div>

Javascript

//Function To Display Popup
function div_show() {
    document.getElementById('abc').style.display = "block";
}

//Function to Hide Popup
function div_hide(){
    document.getElementById('abc').style.display = "none";
}
javascript

  • It turns out that the popup div appears on the page, without being clicked by butao.

  • After the button, I’ve already edited.

  • 1

    Your question is somewhat vague, but clear up a few questions for me: 1 - Are you using jQuery? 2 - Have you tried changing the css display property from popup to 'None'? Try: <div id="popup" style="display: none;"> or <div id="popup" hidden>

3 answers

2

You have two problems with your code:

  • two equal ids and this cannot: button#popup and div#popup
  • you are asking to show the div#abc but all the content is inserted inside it; I believe it wants to show only the div#popup

var oPop   = document.getElementById('popup'),
    oBotao = document.getElementById('openpopup');

function div_show() {
    oPop.style.display = "block";
    oBotao.onclick = div_hide;
    oBotao.innerHTML = "Esconder";
}

//Function to Hide Popup
function div_hide() {
    oPop.style.display = "none";
    oBotao.onclick = div_show;
    oBotao.innerHTML = "Popup";
}
<div id='abc'>(...)
    <div id="popup" hidden>
        <label>Conteúdo do popup</label>
    </div>
    <button id="openpopup" onclick="div_show()">Popup</button>
</div>

I made another version to simulate the effect modal ("dark and blocked back" cited by the author of the question) where the #popup occupies the entire width and height of the #abc. The elements that are theoretically on top are inaccessible. This effect is achieved with the position:relative to the #abc and position:absolute to the #popup. It is worth noting the use of attribute hidden HTML5.

var oPop   = document.getElementById('popup'),
    oBotao = document.getElementById('openpopup');

function div_show() {
  oPop.style.display = "block";
  oBotao.onclick = div_hide;
  oBotao.innerHTML = "Esconder";
}

function div_hide() {
  oPop.style.display = "none";
  oBotao.onclick = div_show;
  oBotao.innerHTML = "Popup";
}
#abc, #popup {
  width: 100%;
  min-height: 200px;
  padding: 1em;
}
#abc {
  background-color: #ffcccc;
  position: relative;
}
#popup {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
}
#popup div {
  padding:1em;
  background-color: #ccccff;
  color: #fff;
  width: 10%;
  margin: auto;
  
}
#openpopup {
  float: left;
  clear: both;
}
<div id='abc'>
  <div id="popup" hidden>
    <div><label>Conteúdo do popup</label></div>
  </div>
  <h3>(...)</h3>
  <a href="#">(...)</a>
  <br>
  <input type="text">
</div>
<button id="openpopup" onclick="div_show()">Popup</button>

0

Try this html code from this site: http://www.botecodigital.info/jquery/criando-uma-janela-modal-simples-com-jquery/

<html>
    <head>
        <title>Janela modal</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
        <script type="text/javascript">
            $(document).ready(function(){
                $("a[rel=modal]").click( function(ev){
                    ev.preventDefault();

                    var id = $(this).attr("href");

                    var alturaTela = $(document).height();
                    var larguraTela = $(window).width();

                    //colocando o fundo preto
                    $('#mascara').css({'width':larguraTela,'height':alturaTela});
                    $('#mascara').fadeIn(1000); 
                    $('#mascara').fadeTo("slow",0.8);

                    var left = ($(window).width() /2) - ( $(id).width() / 2 );
                    var top = ($(window).height() / 2) - ( $(id).height() / 2 );

                    $(id).css({'top':top,'left':left});
                    $(id).show();   
                });

                $("#mascara").click( function(){
                    $(this).hide();
                    $(".window").hide();
                });

                $('.fechar').click(function(ev){
                    ev.preventDefault();
                    $("#mascara").hide();
                    $(".window").hide();
                });
            });
        </script>

        <style type="text/css">

        .window{
            display:none;
            width:300px;
            height:300px;
            position:absolute;
            left:0;
            top:0;
            background:#FFF;
            z-index:9900;
            padding:10px;
            border-radius:10px;
        }

        #mascara{
            position:absolute;
            left:0;
            top:0;
            z-index:9000;
            background-color:#000;
            display:none;
        }

        .fechar{display:block; text-align:right;}

        </style>

    </head>


    <body>
        <a href="#janela1" rel="modal">Janela modal</a>
        <a href="#janela2" rel  ="modal">Janela 2 modal</a>


        <div class="window" id="janela1">
            <a href="#" class="fechar">X Fechar</a>
            <h4>Primeira janela moda</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis auctor tempus. Lorem ipsum dolor sit amet,</p>
            <p>Morbi dui lacus, placerat eget pretium vehicula, mollis id ligula. Nulla facilisi. </p>
        </div>

        <div class="window" id="janela2">
            <a href="#" class="fechar">X Fechar</a>
            <h4>Formulario</h4>
            <form action="#" method="post">
                <label for="nome">Nome:</label>
                <input type="text" name="nome" id="nome">
                <br />

                <label for="nome">Senha:</label>
                <input type="text" name="senha" id="senha">
                <br />

                <input type="submit" value="enviar">

            </form>
        </div>

        <!-- mascara para cobrir o site --> 
        <div id="mascara"></div>
    </body>
</html>

0

Your problem is with css. The back div(background) should have a z-index larger than the button but smaller than the popup and should also have measures at 100%.

Here’s a link that helps you : jsfiddle

Browser other questions tagged javascript

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