Close div on an output link or when clicking outside

Asked

Viewed 4,054 times

2

Hello I have the following code.

function abreConteudo(element) {
    alert($(element).attr('class'));
    alert($(element > "div.descricaoobs").text());
}

$(document).ready(function () {
    $("div.botao_melhor_leitura").click(function (e) {
        $(this).find(".descricaoobs").attr('style', 'display:block;');

        var mousex;
        var estado = $(this).find(".descricaoobs").attr('class');
        /*var tipVisX = $(window).width();*/
        $(this).find(".descricaoobs").css({
            right: mousex
        });
    })
})
.descricaoobs{
	overflow-y:hidden;
	border:  #999999 solid 1px;
	background-color:#F8F8FF;
	position:center;
	padding:1px 3px;
	position: absolute;
	display: none;	
	text-align: left;
	font-size:12px;
}
<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="utf-8">
        <title>Globo.com Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
    </head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    
    <body>
        <table style="width:100%" border="1">
            <tr>
                <td>id</td>
                <td>obs</td>
                <td>Teste1</td>
                <td>Teste2</td>
                <td>Teste3</td>
                <td>Teste4</td>
                <td>Teste5</td>
            </tr>
            <tr>
                <td>Eve</td>
                <td>
                    <div class='botao_melhor_leitura'>
                        <button type="button">Clique aqui</button>
                        <div class='descricaoobs'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat qua</div>
                </td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. Aenean suscipit lectus massa, sit</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. Aenean suscipit lectus massa, sit</td>
            </tr>
        </table>
    </body>

</html>

which is intended to open a div with a text when I click the button.So far so good, the problem is that I need a boot to get out of this div. It can be a close button or when clicking outside the div close the same.

Can someone help me.

javascript jquery

3 answers

1


You can add the following code:

        $(document).mouseup(function(){
            $('.descricaoobs').hide();
        });

This will make this div hidden by clicking anywhere else in the document.

See working: http://jsfiddle.net/131gn0uj/1/

  • can also use $('. descricaoobs'). css('visibility','Hidden');

0

A good way to create the "close by clicking outside" feature is as follows:

HTML:

 <div id="conteudo" >
  <a href="#">Meu link</a>
    <p>Se clicar aqui, não vai poder fechar</p>
</div>

<a id="abre-conteudo" href="#">Aqui abre o #conteúdo. Se clicar aqui, não pode fechar</a>

JQUERY:

$(function(){

    $(document).click(function(e)
    {
        var condition = 
             $(e.target).is('#conteudo')  // verifica se o elemento clicado é o #conteudo
             || $('#conteudo').has(e.target).size() // verifica se o elemento clicado está dentro de #conteudo
             || $(e.target).is('#abre-conteudo'); // verifica se o elemento é o clicado é o #abre-conteudo


        if ( condition ) {
           return false;
        }

        $("#conteudo").fadeOut();
    });

});

Look at this JSFIDDLE

0

I leave two suggestions that are in this check:

if (el.hasClass('fechar') || !el.closest('.botao_melhor_leitura').length)

The first implies using a span for example to be the closing button. The other is as requested, looking for clicks off the "mother div".

Note that when you write .attr('style','display:block;'); you’re overwriting whole the contents of this attribute. Use .css('display', 'block'); would be much more correct/safe

function abreConteudo(element) {
    alert($(element).attr('class'));
    alert($(element > "div.descricaoobs").text());
}

$(document).ready(function () {
    $("div.botao_melhor_leitura").click(function (e) {
        $(this).find(".descricaoobs").css('display', 'block');

        var mousex;
        var estado = $(this).find(".descricaoobs").attr('class');
        /*var tipVisX = $(window).width();*/
        $(this).find(".descricaoobs").css({
            right: mousex
        });
    })
})

$(document).on('click', function (e) {
    var el = $(e.target);
    if (el.hasClass('fechar') || !el.closest('.botao_melhor_leitura').length) $('.descricaoobs').hide();

});
.descricaoobs {
     overflow-y:hidden;
     border: #999999 solid 1px;
     background-color:#F8F8FF;
     position:center;
     padding:1px 3px;
     position: absolute;
     display: none;
     text-align: left;
     font-size:12px;
 }
 .fechar:hover {
     cursor: pointer;
     color: red;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" border="1">
    <tr>
        <td>id</td>
        <td>obs</td>
        <td>Teste1</td>
        <td>Teste2</td>
        <td>Teste3</td>
        <td>Teste4</td>
        <td>Teste5</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>
            <div class='botao_melhor_leitura'>
                <button type="button">Clique aqui</button>
                <div class='descricaoobs'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat qua. <span class="fechar"> (fechar)</span>

                </div>
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. Aenean suscipit lectus massa, sit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. Aenean suscipit lectus massa, sit</td>
    </tr>
</table>

jsFiddle: http://jsfiddle.net/ydu6hm7L/

Browser other questions tagged javascript jquery

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