Привет, не получается реализовать открытие модального окна fancybox в том div, в котором оно собственно и располагается. По дефолту модальное окно fancybox открывается относительно body и располагается по центру всей страницы. Подскажите, как сделать так, чтобы модальное окно открывалось в пределах родительского див и располагалось относительно его. Заранее благодарю
-
Так может быть вам и не нужен fancybox? Опишите вкратце, что должно получиться на выходе? Возможно то что вы хотите, можно реализовать ajax и css?– Евгений13 дек 2017 в 13:11
Добавить комментарий
|
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>
-
1