Good day,

Maybe someone can tell the following task:

When the body opens a modal window, a modal-open class appears, and when it closes, it disappears and I need to attach an action to this action that will hide / show the open button of this modal window itself.

I do so, but for some reason it does not work:

 if ($('body').hasClass('modal-open')) { $('.imcallask-btn-mini').hide(); } if ($('body').not('modal-open')) { $('.imcallask-btn-mini').show(); }
  • Where do you use this code? - Yuri
  • For this, it is not necessary to use jQuery. CSS is enough. - Roman Polshikov
  • I do it this way, but for some reason it does not work: - it actually works. - Grundy
  • What modal window are we talking about? self-written or use some kind of library? - Grundy

1 answer 1

Option number 1 . One CSS usage option:

 .modal {display:none;} body.modal-open #open {display:none;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="data:text/javascript;charset=UTF-8,$(function() { $('#open').click(function() { $('.modal').show(); $('body').addClass('modal-open'); }); $('#close').click(function() { $('.modal').hide(); $('body').removeClass('modal-open'); }); });"></script> <button id="open" class="imcallask-btn-mini">Открыть</button> <button id="close">Закрыть</button> <div class="modal">Модальное окно</div>

Option number 2 . We catch clicking on the button for opening and closing a modal window:

 $(function() { /* Наш код отлавливания */ $(document).on('click', '#open', function() { $('.imcallask-btn-mini').hide(); }); $(document).on('click', '#close', function() { $('.imcallask-btn-mini').show(); }); }); 
 .modal {display:none;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="data:text/javascript;charset=UTF-8,$(function() { $('#open').click(function() { $('.modal').show(); $('body').addClass('modal-open'); }); $('#close').click(function() { $('.modal').hide(); $('body').removeClass('modal-open'); }); });"></script> <button id="open" class="imcallask-btn-mini">Открыть</button> <button id="close">Закрыть</button> <div class="modal">Модальное окно</div>

Option number 3 . Create an interval that will check for the presence of the .modal-open class:

 $(function() { /* Наш код интервала */ setInterval(function() { if($('body').hasClass('modal-open')){ $('.imcallask-btn-mini').hide(); }else{ $('.imcallask-btn-mini').show(); }; }, 100); }); 
 .modal {display:none;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="data:text/javascript;charset=UTF-8,$(function() { $('#open').click(function() { $('.modal').show(); $('body').addClass('modal-open'); }); $('#close').click(function() { $('.modal').hide(); $('body').removeClass('modal-open'); }); });"></script> <button id="open" class="imcallask-btn-mini">Открыть</button> <button id="close">Закрыть</button> <div class="modal">Модальное окно</div>

  • The third option is what was needed, since the window can be closed by two buttons and by pressing outside the window)) thank you very much) - Waropank
  • @Waropank, the third option is the worst of all. If you don’t like the solution without any scripts at all, then it’s better to send an event when the modal window is closed that the window has closed. All libraries in which modal windows are implemented already have such an event. For a samopisny modal window is also not difficult to add - Grundy
  • @Grundy, at the expense of the third option - I agree) - Yuri
  • @Grundy I am a beginner in this business, I understood the essence, but I don’t have any idea how to implement this, can you tell me?) - Waropank
  • @Waropank, is there a library used for a modal window? - Grundy