Have popup window

jQuery(document).ready(function($){ $('.call_popup').click(function(){ $('.popup').toggleClass('open'); }); $('.popup_header i').click(function(){ $('.popup').removeClass('open'); }) });

There are styles connected to it.

 .popup { display:none; width: 250px; height: 250px; padding: 25px; box-shadow: 0 0px 200px 0 rgba(32,19,45,0.90); position: absolute; top: calc(50%-125px); left: calc(50%-125px); } .popup.open { display: block; } .popup_header { position: relative; } .popup_header i { position: absolute; top: 5px; right: 5px; }

I can not understand why it does not work?

  • add console.log("click"); to click handlers console.log("click"); . Does anything appear in the console? - Igor

1 answer 1

You did not add the HTML code, that's why I sketched my modalku. I hope the idea is clear.

 jQuery(document).ready(function($){ $('.call_popup').click(function(e){ e.preventDefault(); $('.popup').fadeToggle('open'); }); }); 
 .popup{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: none; } .popup_box{ position: absolute; width: 200px; right: 0; left: 0; top: 50%; bottom: 0; transform: translateY(-50%); margin: 0 auto; display: flex; flex-direction: column; justify-content: space-around; align-items: center; border: 1px dashed coral; } .close{ position: absolute; right: 5px; top: 5px; color: white; transform: rotate(45deg); text-decoration: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="call_popup">OpenPopup</button> <div class="popup"> <div class="popup_box"> <a href="#" class="call_popup close">+</a> <p>Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem </p> <span>Lorem</span> <button type="submit">Lorem</button> </div> </div>