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>
jquery

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 jquery

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