Hide Pop Up Lightbox div by clicking on an Item / button

0

I made an ad on my site, for Multipurpose.

I would like to make a "PopUp" ( PopOver , or known Modal ) my custom, in case I created a div .

The ID of div is adonsite , and I would like to close it by clicking another div .

Is there any script for this?

    
asked by anonymous 19.05.2015 / 04:52

2 answers

1

.stopPropagation(); should do the work, for example here . However using .stopPropagation(); can sometimes be bad.

So I would do it another way. First you would create a "cover" layer of #overlay that will completely cover the entire page and that will also be used as a "close" button, so when we click anywhere in this layer / div% we will hide both the div #overlay and the so-called ad.

Next within #overlay you would then create a new #overlay that will contain all informative content such as text, ads, and even another "close" button if you want to be able to close this Cashier. This is a system that many Lightbox Plugins use.

Example: link

// Ao clicar nos elementos #overlay ou #close fecha a caixa
$( '#overlay, #close').on('click', function(event) {
    $("#adonsite, #overlay").hide();
});

$( '#show').on('click', function(event) {
    $("#adonsite, #overlay").show();
});
#close {float: right;}

.white-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px;
    border: 5px solid gray;
    background-color: white;
    z-index:1002;
    overflow: auto;
}
#overlay {
    background-color: rgba(0,0,0,.5); /* Podes remover esta linha se quiseres um Background transparente */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
}

.advertise {
  background: #5DB0EE;
  color: #fff;
  font-size: 80px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><buttonid="show">Show lightbox</button>

<div id="adonsite" style="display:none">
    <div class="white-content">
        <button id="close">Close</button>
            <p>Clique no botão (Close) ou em qualquer sítio fora da caixa branca para ocultar isto.</p>
            <div class="advertise">AD</div>
    </div>
</div>
<div id="overlay" style="display:none">
    
19.05.2015 / 07:42
0

If you are using jQuery, run the following command to hide the div :

$("#divId").hide();

If a dialog of jquery-ui is open, run the following command to close the dialog :

$("#divId").dialog("close");

If you use pure Javascript, run the following command to hide a div :

document.getElementById("divId").style.display = 'none';

For the cases mentioned above divId is the identifier of div , for example, the div will be closed:

<div id="divId">.....</div>
    
19.05.2015 / 05:03