There is such an example, you need to open the modal when hovering, when we remove the mouse from the link, the window closes. How to implement this?

$('.open-popup-link').mouseover(function() { $.magnificPopup.open({ items: { src: '.white-popup' // can be a HTML string, jQuery object, or CSS selector } }) }); $.magnificPopup.close(); 
 .white-popup { position: relative; background: #FFF; padding: 20px; width: auto; max-width: 500px; margin: 20px auto; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css"> <a href="#test-popup" class="open-popup-link">Show inline popup</a> <!-- Popup itself --> <div id="test-popup" class="white-popup mfp-hide"> Popup content </div>

  • A popup should cover the link or not? - Raz Galstyan

1 answer 1

In general, the problem is that when you open a modal window, the connection of the cursor with the link is broken (a pad appears in the form of this very popup). Therefore, hover only works on the opening.

To make it work in the opposite direction, the reference must be set to position: relative and z-index

 $('a').hover(function(){ $('.fon, .popup').css('display','block') }, function(){ $('.fon, .popup').css('display','none') }); 
 a { position: relative; z-index: 1; } .fon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: .6; display: none; } .popup { position: absolute; width: 200px; padding: 15px; background-color: white; border: 2px solid black; text-align: center; top: 50px; left: 0; right: 0; margin: auto; display: none; } 
 <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <a href="">Наведи на меня свой курсор</a> <div class="fon"></div> <div class="popup">Какой-то текст</div>