There is a pop-up form, you need to close it if click outside of it and close-open if click on the button that calls it. Actually the code is written. But I can not understand how to combine in the selector $ (document) and $ (". Region-item"). Or maybe someone has a better snippet?

$(document).click(function (event) { if($(event.target).has(".all-regions").length == 1) { $(".all-regions").toggle(0).find(".search-region_row").focus(); } }); $(".region_item").click(function(event) { $(".all-regions").toggle(0).find(".search-region_row").focus(); });

    1 answer 1

    Well, consider that they are connected by default, all elements of the DOM are located in the document in one way or another.

    A small snippet with a modified answer from engSO :

     $(window).click(function() { $('#menucontainer').hide();//Обрабатываем клик ВНЕ меню }); $(document).on('click','.someControl', function(event){ $('#menucontainer').show();//Обрабатываем клик на элементы управления, вызывающие меню event.stopPropagation();//Убираем дальнейшее дефолтное поведение }) $('#menucontainer').click(function(event) { event.stopPropagation();//обрабатываем клик внутри меню }); 
     .wrapper{ height: 100%; width: 100%; } #menucontainer{ background: whitesmoke; position: fixed; top: calc(50% - 80px); left:calc(50% - 100px); display: flex; flex-direction: column; padding: 40px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='button' value='ShowDialog' class='someControl'/> <div class='wrapper'> <div id='menucontainer'> <input type='text' value='SomeTextHere' /> <input type='button' value='Close' onclick='$(this).parent().hide()'/> </div> </div>