Hide Pop Up Lightbox div when Clicking an Element/button

Asked

Viewed 1,376 times

1

I made an ad on my website, for Multipurpose.

I’d like to do a "Popup" (Popover, or known Modal) customized my, in case I created a div.

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

Is there a script for this?

javascript jquery html script

  • Can you show the modal code you have? is yours or jQuery? has overflay or no? the close button is inside or outside Modal?

2 answers

2


.stopPropagation(); should do the work as for example here at this link.
However use .stopPropagation(); sometimes it can be bad.

So I would do it another way. I would first create a "layer" of coverage #overlay which will cover the entire page and which will also be used as a button "close-up", so when we click anywhere in this/div layer #overlay we will hide both, the div #overlay and also the supposed advertisement.

Then inside the #overlay would then create a new div class="white-content" which will contain all informative content such as text, ads, and even another button "close-up" if you want to close this box. This is a system that many Lightbox Plugins use.

Example: http://jsfiddle.net/rfa3jh2x/

// 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>

<button id="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">

  • 1

    Thank you. That’s what I’m looking for :)

  • You’re welcome @Hugomarcelo =)

1

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

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

If it is a dialog of jquery-ui open, execute 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 cited above divId is the identifier of the div, for example, the div will then be closed:

<div id="divId">.....</div>

Browser other questions tagged javascript jquery html script

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