How to hide div when clicking on any part of the jquery page?

Asked

Viewed 137 times

-2

I have a script that shows a div I currently have to show when I click and hide when I click but I want when opened the user when click on any part of the page hide the div someone can give a help ?

Jquery

$(document).ready(function(){

    $("body").click(function(){
        $('#opcoes-'+id_agente+'').hide();
    });

    $("body").on('click', '#botao_ver_opcoes', function(e) {
        var id_agente = $(this).data("id-agente");
        $('#opcoes-'+id_agente+'').toggle();
        event.stopPropagation();
    });

    $('#opcoes-'+id_agente+'').hide();
});

HTML

<div id="opcoes-{{ $agent_tree->user_id }}" style="width: 130px; margin-top: 30px; background-color: white; border: 1px solid #c2c5cd; z-index: 10; position: absolute; display: none; border-top: none;">
    <!--<div data-toggle="modal" data-target="#modal-add-credito" id="add-credito-btn" data-id-agente="{{ $agent_tree->user_id }}" data-id-line="{{ $agent_tree->credit_line }}" style="text-align: center; line-height: 30px; cursor: pointer;">TRANSFERIR</div>-->
    <div data-toggle="modal" data-target="#modal-info-agente" id="info-user-btn" data-id-agente="{{ $agent_tree->user_id }}" style="text-align: center; line-height: 30px; cursor: pointer;">INFORMAÇÕES</div>
    <!--<div data-toggle="modal" data-target="#modal-update-senha" id="change-pwd-btn" data-id-agente="{{ $agent_tree->user_id }}" style="text-align: center; line-height: 30px; cursor: pointer;">SENHA</div>
    <div style="text-align: center; line-height: 30px; cursor: pointer;">MENSAGEM</div>-->
</div>

1 answer

0

How to hide div when clicking on any part of the jquery page

In this code snippet instead of body it has to be Document

$("body").click(function(){
    $('#opcoes-'+id_agente+'').hide();
});

it has to be like this

 $(document).click(function(){
    $('#opcoes-RESULTid_agente').hide();
 });

$(document).ready(function(){

    $(document).click(function(){
        $('#opcoes-RESULTid_agente').hide();
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="opcoes-RESULTid_agente" style="width: 130px; margin-top: 30px; background-color: white; border: 1px solid #c2c5cd; z-index: 10; position: absolute; border-top: none;">
    <!--<div data-toggle="modal" data-target="#modal-add-credito" id="add-credito-btn" data-id-agente="{{ $agent_tree->user_id }}" data-id-line="{{ $agent_tree->credit_line }}" style="text-align: center; line-height: 30px; cursor: pointer;">TRANSFERIR</div>-->
    <div data-toggle="modal" data-target="#modal-info-agente" id="info-user-btn" data-id-agente="{{ $agent_tree->user_id }}" style="text-align: center; line-height: 30px; cursor: pointer;">INFORMAÇÕES</div>
    <!--<div data-toggle="modal" data-target="#modal-update-senha" id="change-pwd-btn" data-id-agente="{{ $agent_tree->user_id }}" style="text-align: center; line-height: 30px; cursor: pointer;">SENHA</div>
    <div style="text-align: center; line-height: 30px; cursor: pointer;">MENSAGEM</div>-->
</div>

Now how to reference the id in the function to match the id of the div is another question

  • Thanks for the answer already tested but only hides clicked on the button if click on any part of the page does not close keep open the div

  • I edited the answer with an example because your HTML was missing from the question

  • OK I’ve put html now refocus the answer if please based on what I have so that later I can give your answer as sure

  • this id="options-{{ $agent_tree->user_id }}" of the div you have to put in place of #login-panel

  • The problem is that I am saving the user_id astraves of an assigned date as I can spend when I click so off the page or it will not know which to close

Browser other questions tagged

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