1

Eu fiz um anúncio no meu site, para Multiuso.

Eu gostaria de fazer um "PopUp" (PopOver, ou conhecido Modal) personalizado meu, no caso criei uma div.

O ID da div é adonsite, e eu gostaria de fechar ela ao clicar em outra div.

Existe algum Script para isso?

1
  • Podes mostrar o código do modal que tens? é teu ou o do jQuery? tem overflay ou nõ? o botão para fechar está dentro ou fora do Modal?
    – Sergio
    Commented 19/05/2015 às 5:30

2 Respostas 2

2

.stopPropagation(); deve fazer o trabalho como por exemplo aqui neste link.
No entanto usar .stopPropagation(); as vezes pode ser mau.

Então eu faria isto de outra forma. Primeiro iria criar uma "camada" de cobertura #overlay que irá cobrir toda a página por completo e que será também usada como um botão "close", assim quando clicarmos em qualquer sitio desta camada/div #overlay iremos ocultar ambos, a div #overlay e também o suposto anúncio.

Em seguida dentro da #overlay iria então criar uma nova div class="white-content" que irá conter todo o conteúdo informativo como texto, anúncios, e até outro botão "close" se quiseres para poder fechar esta caixa. Este é um sistema que muitos Plugins Lightbox utilizam.

Exemplo: 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">

2
  • 1
    Obrigado. É Isso que eu procuro :) Commented 20/05/2015 às 0:58
  • De nada @HugoMarcelo =)
    – Chun
    Commented 20/05/2015 às 0:59
1

Caso você esteja utilizando jQuery, execute o comando a seguir para esconder o div:

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

Caso seja um dialog do jquery-ui aberto, execute o seguinte comando para fechar o dialog:

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

Caso utilize Javascript puro, execute o seguinte comando para esconder um div:

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

Para os casos citados acima divId é o identificador do div, por exemplo, o div a seguir será fechado:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .