Close div on exit link or click off

Navigation
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><tablestyle="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>

This is to open a div with a text when I click on the button. So far, the problem is that I need a button to exit this div. It may be a close button or when clicking outside the div close it.

Someone can help me.

    
asked by anonymous 08.01.2015 / 19:41

3 answers

1

You can add the following code: 

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

This will cause this div to be hidden by clicking anywhere else in the document.

See it working: link

    
08.01.2015 / 19:54
0

I leave two suggestions that are in this check: 

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

The first one implies using span for example to be the close button. The other is as you requested, looking for clicks off of the "parent div".

Note that when you type .attr('style','display:block;'); you are overwriting everything the content of this attribute. Using .css('display', 'block'); would be much more correct / secure 

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><tablestyle="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: link

    
08.01.2015 / 20:33
0

A good way to create the "close when clicked off" functionality 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();
    });

});

See this JSFIDDLE

    
19.02.2015 / 14:07
R filter sets Get url parameter with $ _GET coming from an iframe - WORDPRESS