Модальное окно fancybox относительно родителя

292

15 декабря 2017, 01:12

Привет, не получается реализовать открытие модального окна fancybox в том div, в котором оно собственно и располагается. По дефолту модальное окно fancybox открывается относительно body и располагается по центру всей страницы. Подскажите, как сделать так, чтобы модальное окно открывалось в пределах родительского див и располагалось относительно его. Заранее благодарю

Answer 1

Как например:

$(".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>