Hi, I’m not able to realize opening the fancybox modal window in the div in which it itself is located. By default, the fancybox modal window opens relative to the body and is located in the center of the entire page. Tell me how to make the modal window open within the parent div and located relative to it. Thank you in advance enter image description here

  • So maybe you don't need a fancybox? Describe briefly what should happen at the exit? Perhaps what you want, you can implement ajax and css? - Eugene

1 answer 1

Such as:

$(".modal-trigger").fancybox({ beforeShow: function(){ $(".fancybox-overlay").appendTo(".box"); } }); 
 * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: monospace; } .wrap { display: flex; } aside { background: #ccc; width: 30%; height: 100vh; } main { width: 70%; } .modal-trigger { text-decoration: none; text-transform: uppercase; color: #000; font-size: 1.5rem; border: 1px solid #000; text-align: center; padding: 1rem; display: block; } .modal { display: none; } .box { height: 50vh; background: #eee; position: relative; } .fancybox-overlay-fixed { position: absolute !important; } 
 <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.7/css/jquery.fancybox.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.7/js/jquery.fancybox.min.js"></script> <div class="wrap"> <aside> </aside> <main> <div class="box"> <a href="#modal" class="modal-trigger">Open Modal</a> <div id="modal" class="modal"> <h2>Модальное окно</h2> </div> </div> </main> </div>

  • one
    ingeniously) thank you - Evgeny Grishanov