Greetings.

Tell me, please, how to make the modal block disappear when you click on any other element besides input itself.

$(document).click(function(e){ if ($(e.target).is('#search')) { $('#modalsearch').fadeIn(); } }) 
 @charset "UTF-8"; .modal { top: 0; left: 0; position: fixed; width: 100%; height: 100%; display: none; justify-content: center; z-index: 6; } .modal::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.8; } .modal__input { width: 100%; padding: 15px 25px; border-radius: 50px; font-size: 1.25em; } .modal__input:focus::placeholder { opacity: 0; } .modal__input::placeholder { color: #8d8d8d; transition: all 0.1s linear; } .modal__input_wrap { position: relative; grid-column: 3/11; margin: 210px 0 0 0; z-index: 7; } .modal__input_wrap::after { position: absolute; font-family: FontAwesome; content: ""; font-size: 1em; color: #ffc100; right: 22.5px; top: 19px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="searchopen" id="search">open</button> <div class="modal modal__search" id="modalsearch"> <div class="container"> <div class="modal__input_wrap"> <input class="modal__input" id="#searchinput" type="text" placeholder="Lūdzu ievadiet meklējamo vārdu vai frāzi"> </div> </div> </div>

2 answers 2

 $(() => { const $modal = $('#modalsearch'); $(document).on('click', '#search', () => { $modal.fadeIn(); }); $(document).on('click', '#modalsearch', e => { if(!$(e.target).hasClass('modal__input')) { $modal.fadeOut(); } }); }); 
 @charset "UTF-8"; .modal { top: 0; left: 0; position: fixed; width: 100%; height: 100%; display: none; justify-content: center; z-index: 6; } .modal::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.8; } .modal__input { width: 100%; padding: 15px 25px; border-radius: 50px; font-size: 1.25em; } .modal__input:focus::placeholder { opacity: 0; } .modal__input::placeholder { color: #8d8d8d; transition: all 0.1s linear; } .modal__input_wrap { position: relative; grid-column: 3/11; margin: 210px 0 0 0; z-index: 7; } .modal__input_wrap::after { position: absolute; font-family: FontAwesome; content: ""; font-size: 1em; color: #ffc100; right: 22.5px; top: 19px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="searchopen" id="search">open</button> <div class="modal modal__search" id="modalsearch"> <div class="container"> <div class="modal__input_wrap"> <input class="modal__input" id="#searchinput" type="text" placeholder="Lūdzu ievadiet meklējamo vārdu vai frāzi"> </div> </div> </div>

  • Thank you very much! :) I will pull up JS. - Ivan

 var $modalBtn = $('.open-modal'); $(document).on('click', function(event) { var target = $(event.target); if(target.hasClass('open-modal')) { $("#" + target.data('action')).slideToggle().addClass('now-open'); }else if(target.hasClass('now-open')) { event.preventDefault(); $('.now-open').removeClass('now-open').slideToggle(); } }); 
 .modal{ position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,.7); display:none } .modal .modal-content{ background-color:rgba(255,255,255,.7) } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="open1" class="open-modal" type="button" value="open modal 1" data-action="modal-1" /> <input id="open2" class="open-modal" type="button" value="open modal 2" data-action="modal-2" /> <div class="modal" id="modal-1"> <div class="modal-content"> <form> <p>modal 1 content</p> <p>modal 1 content</p> <p>modal 1 content</p> <input type="submit" value="check default submit" /> </form> </div> </div> <div class="modal" id="modal-2"> <div class="modal-content"> <p>modal 2 content</p> <p>modal 2 content</p> <p>modal 2 content</p> </div> </div>