2

Olá tenho o seguinte codigo.

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>

que tem por finalidade abrir uma div com um texto quando clico no botao.Até ai tudo bem, o problema e que preciso de um botao para sair dessa div. Pode ser um botao de fechar ou quando clicar fora da div fechar a mesma.

Alguém pode me ajudar.

3 Respostas 3

1

Você pode adicionar o seguinte código:

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

Isso vai fazer com que essa div seja escondida ao clicar em qualquer outro lugar do documento.

Veja funcionando: http://jsfiddle.net/131gn0uj/1/

1
  • pode usar também $('.descricaoobs').css('visibility','hidden'); 8/01/2015 às 18:59
0

Deixo duas sugestões que estão nesta verificação:

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

A primeira implica usar um span por exemplo para ser o botão de fecho. A outra é como pediu, procurando clics fora da "div mãe".

Nota que quando escreves .attr('style','display:block;'); estás a sobreescrever todo o conteúdo desse atributo. Usar .css('display', 'block'); seria bem mais correto/seguro

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/

0

Uma boa maneira de se criar a funcionalidade de "fechar ao clicar fora" é a seguinte:

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();
    });

});

Veja esse JSFIDDLE

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 .