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?
.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"> 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>