Pop-up opening before being clicked by button

Question

Pop-up opening before being clicked by button

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

3

I wanted to use a popup in a div but it happens that the popup div appears on the page without being clicked by the button. When it was opened it wanted to make the back dark and locked. I tried this:

<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

asked by anonymous 21.10.2014 / 00:05

3 answers

Create xls file and save to a folder How to create a service in Python that keeps running after responding?

score 2 · Answer 1

You have two problems with your code:

two identical ids and this can not: button#popup and div#popup
you are asking to show div#abc but all content is inserted inside it; I believe you want to show only 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 modal ("dark back and locked" quoted by the questioner) where #popup occupies the entire width and height of #abc . The elements that in theory are above are inaccessible. This effect is achieved with position:relative for #abc and position:absolute for #popup . It's worth noting the use of HTML5% attribute %

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>

score 0 · Answer 2

Try this html code, from this website: link

<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><scripttype="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>

score 0 · Answer 3

0

Your problem is in cs.s.a div background should have a z-index larger than the button but smaller than the popup and should also have 100% measurements.

Here's a link that might help you: jsfiddle

21.10.2014 / 00:51