09.11.2016, 13:39
|
|
Аспирант
|
|
Регистрация: 06.04.2015
Сообщений: 42
|
|
|
Центрирование всплывающего div по отношению к элементу
Добрый день. Есть вот такой код, вот такая задумка:
<html>
<head>
<meta charset="UTF-8">
<title></title>
[COLOR="DarkOrchid"]//Стили, относящиеся чисто к всплывающим окнам:[/COLOR]
<style>
.open-popup {
border-bottom: 2px dotted #0036fd;
cursor: pointer;
font-size: 18px;
position:relative;
margin:10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.open-popup:hover {
border-bottom: 2px dotted #00bfff;
color: #fff;
}
.popup {
background: #544f6b -5px -5px;
border: 5px solid rgba(197, 192, 192, .7);
border-radius: 10px;
height: 500px;
position: absolute;
width: 90%;
z-index: 999;
}
.popup-content {
border-radius: 6px;
line-height: 1.6;
padding: 14px 18px 0 17px;
color:#fff;
}
.popup-title {
background: url(http://verstaka.net/examples/html-css/popups/popup-1/images/bg-popup-title.png) repeat-x;
border-radius: 6px 6px 0 0;
font-family: 'HelveticaNeue', sans-serif;
font-size: 17px;
height: 43px;
line-height: 43px;
text-align: center;
padding: 0 0 0 16px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
box-shadow: inset 0 1px 1px #e6edef;
margin: 0;
color: #000;
}
.popup-choice {
margin: 34px 0 0;
text-align: center;
}
.btn-close {
background: url(http://verstaka.net/examples/html-css/popups/popup-1/images/btn-close.png) no-repeat;
height: 17px;
right: 15px;
position: absolute;
top: 13px;
width: 16px;
}
.btn-close:hover {
cursor: pointer;
}
.hide-layout {
background: #000;
bottom: 0;
display: none;
height: 100%;
opacity: 0.5;
position: fixed;
top: 0;
width: 100%;
z-index: 998;
}
</style>
</head>
[COLOR="DarkOrange"]//примерная верстка[/COLOR]
<body>
<div style="text-align:center; height:200px; background:red">тут ооочень много текста и всякого рода плюшек</div>
<div><p>Вкладка первая</p>
<div style="text-align:center; height:200px; background:blue">Тут находится большой текст, в нем есть ссылка на всплывающее окно. Вот эта ссылка: <a class="click" data-frameid="1" data-framesrc="http://javascript.ru"><span id="click-me1" class="open-popup">щелкнем сюда, откроется всплывающее окно.</span></a></div></div>
<div><p>Вкладка вторая</p>
<div style="text-align:center; height:200px; background:yellow">Это совершенно другой блок, в котором находится совершенно другой текст и другая ссылка: <a class="click" data-frameid="2" data-framesrc="http://nic.ru"><span id="click-me2" class="open-popup">какое-то другое всплывающее окно</span></a></div>
</div>
<div><p>Вкладка третья</p>
<div style="text-align:center; height:200px; background:#fff">Здесь будет тоже текст, но с использованием первой ссылки на всплывающее окно: <a class="click" data-frameid="1" data-framesrc="http://javascript.ru"><span id="click-me1" class="open-popup">щелкнем сюда, откроется всплывающее окно.</span></a></div>
<div style="text-align:center; height:200px; background:green">А вот здесь будет написан заключительный текст со второй ссылкой на всплывающее окно: <a class="click" data-frameid="2" data-framesrc="http://nic.ru"><span id="click-me2" class="open-popup">какое-то другое всплывающее окно</span></a>
</div>
</div>
[COLOR="Red"]//как видите, так таковых общих родителей (кроме body) нет[/COLOR]
[COLOR="SeaGreen"]//нижние дивы относятся к всплывающим окнам, к их оформлению:[/COLOR]
<div style="display:none" id="popup1" class="popup">
<h2 class="popup-title">Javascript.ru</h2>
<div class="popup-content">
<div class="frameid-1"></div>
</div>
<div id="btn-close1" class="btn-close" title="Закрыть" unselectable="on"></div>
</div>
<div id="hide-layout1" class="hide-layout" unselectable="on"></div></div>
<div style="display:none" id="popup2" class="popup">
<h2 class="popup-title">регистратор доменов</h2>
<div class="popup-content">
<div class="frameid-2"></div>
</div>
<div id="btn-close2" class="btn-close" title="Закрыть" unselectable="on"></div>
</div>
<div id="hide-layout2" class="hide-layout"></div></div>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
[COLOR="RoyalBlue"]//скрипт, отвечающий за всплывающие окна их позиционирование и загрузку iframe по щелчку[/COLOR]
<script>
$(document).ready(function(){
$('.click').on('click', function(){
var frameId = $(this).data('frameid'),
frameSrc = $(this).data('framesrc');
$('#popup'+frameId).hide();
$('#hide-layout'+frameId).css({opacity: .5});
alignCenter($('#popup'+frameId));
$(window).resize(function() {
alignCenter($('#popup'+frameId));
})
$('#hide-layout'+frameId).fadeIn(300);
$('#popup'+frameId).fadeIn(300);
$('.btn-close, #hide-layout'+frameId).click(function() {
$('#hide-layout'+frameId).fadeOut(300);
$('#popup'+frameId).fadeOut(300);
})
if(!document.getElementById(frameId)){
$('<iframe />', {
id : frameId,
src : frameSrc,
width:'100%',
height:'400px',
frameborder:'0',
}).appendTo('.frameid-'+frameId);
}
});
});
function alignCenter(elem) {
var scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
elem.css({
left: ($(window).width() - elem.width()) / 2 + 'px',
top: ((scrollHeight) - elem.height()) / 2 + 'px'
})
}
</script>
</body></html>
Как сделать так, чтобы нажали на ссылку, и окно всплыло в том же месте, где расположена ссылка перекрывая ее? Грубо говоря, чтобы ссылка была центром всплывающего окна. Нужно что-то с центрированием делать, но что? Помогите, пожалуйста 
Последний раз редактировалось Ilya_Ru, 10.11.2016 в 00:47.
|
|
09.11.2016, 15:24
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,121
|
|
|
Сообщение от Ilya_Ru
|
|
чтобы ссылка была центром всплывающего окна
|
Как вариант, вычислять координаты той ссылки... Потом рассчитывать координаты твоего "всплывающего окна"... |
|
09.11.2016, 15:42
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Ilya_Ru,
Для определения координаты ссылки по вертикали используйте
getBoundingClientRect().top
|
|
09.11.2016, 16:52
|
|
Аспирант
|
|
Регистрация: 06.04.2015
Сообщений: 42
|
|
|
А живой пример привести сможете?
|
|
09.11.2016, 16:54
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,121
|
|
|
Сообщение от Ilya_Ru
|
|
А живой пример привести сможете?
|
Ты даже тестовый пример нормальный не удосужился сделать...  А хочешь увидеть какое-то "готовое" решение.
Смотри тут, может найдешь чего подходящее...  |
|
09.11.2016, 17:05
|
|
Аспирант
|
|
Регистрация: 06.04.2015
Сообщений: 42
|
|
|
ksa,
Надо было всю страницу сайта представить? :-) Окай, я могу :-) Единственное, что я немного сглупил - так это представил полные css всплывающего окна. Можно было сократить...
Зато я куском верстки показал, в чем проблема, можно визуально все пощупать, да и показал то, что css всякие position тут неуместны :-)
|
|
09.11.2016, 18:16
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
<html>
<head>
<meta charset="UTF-8">
<title></title>
[COLOR="DarkOrchid"]//Стили, относящиеся чисто к всплывающим окнам:[/COLOR]
<style>
.open-popup {
border-bottom: 2px dotted #0036fd;
cursor: pointer;
font-size: 18px;
position:relative;
margin:10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.open-popup:hover {
border-bottom: 2px dotted #00bfff;
color: #fff;
}
.popup {
background: #544f6b -5px -5px;
border: 5px solid rgba(197, 192, 192, .7);
border-radius: 10px;
height: 500px;
position: absolute;
width: 90%;
z-index: 999;
}
.popup-content {
border-radius: 6px;
line-height: 1.6;
padding: 14px 18px 0 17px;
color:#fff;
}
.popup-title {
background: url(http://verstaka.net/examples/html-css/popups/popup-1/images/bg-popup-title.png) repeat-x;
border-radius: 6px 6px 0 0;
font-family: 'HelveticaNeue', sans-serif;
font-size: 17px;
height: 43px;
line-height: 43px;
text-align: center;
padding: 0 0 0 16px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
box-shadow: inset 0 1px 1px #e6edef;
margin: 0;
color: #000;
}
.popup-choice {
margin: 34px 0 0;
text-align: center;
}
.btn-close {
background: url(http://verstaka.net/examples/html-css/popups/popup-1/images/btn-close.png) no-repeat;
height: 17px;
right: 15px;
position: absolute;
top: 13px;
width: 16px;
}
.btn-close:hover {
cursor: pointer;
}
.hide-layout {
background: #000;
bottom: 0;
display: none;
height: 100%;
opacity: 0.5;
position: fixed;
top: 0;
width: 100%;
z-index: 998;
}
</style>
</head>
[COLOR="DarkOrange"]//примерная верстка[/COLOR]
<body>
<div style="text-align:center; height:200px; background:red">тут ооочень много текста и всякого рода плюшек</div>
<div><p>Вкладка первая</p>
<div style="text-align:center; height:200px; background:blue">Тут находится большой текст, в нем есть ссылка на всплывающее окно. Вот эта ссылка: <a class="click" data-frameid="1" data-framesrc="http://javascript.ru"><span id="click-me1" class="open-popup">щелкнем сюда, откроется всплывающее окно.</span></a></div></div>
<div><p>Вкладка вторая</p>
<div style="text-align:center; height:200px; background:yellow">Это совершенно другой блок, в котором находится совершенно другой текст и другая ссылка: <a class="click" data-frameid="2" data-framesrc="http://nic.ru"><span id="click-me2" class="open-popup">какое-то другое всплывающее окно</span></a></div>
</div>
<div><p>Вкладка третья</p>
<div style="text-align:center; height:200px; background:#fff">Здесь будет тоже текст, но с использованием первой ссылки на всплывающее окно: <a class="click" data-frameid="1" data-framesrc="http://javascript.ru"><span id="click-me1" class="open-popup">щелкнем сюда, откроется всплывающее окно.</span></a></div>
<div style="text-align:center; height:200px; background:green">А вот здесь будет написан заключительный текст со второй ссылкой на всплывающее окно: <a class="click" data-frameid="2" data-framesrc="http://nic.ru"><span id="click-me2" class="open-popup">какое-то другое всплывающее окно</span></a>
</div>
</div>
[COLOR="Red"]//как видите, так таковых общих родителей (кроме body) нет[/COLOR]
[COLOR="SeaGreen"]//нижние дивы относятся к всплывающим окнам, к их оформлению:[/COLOR]
<div style="display:none" id="popup1" class="popup">
<h2 class="popup-title">Javascript.ru</h2>
<div class="popup-content">
<div class="frameid-1"></div>
</div>
<div id="btn-close1" class="btn-close" title="Закрыть" unselectable="on"></div>
</div>
<div id="hide-layout1" class="hide-layout" unselectable="on"></div></div>
<div style="display:none" id="popup2" class="popup">
<h2 class="popup-title">регистратор доменов</h2>
<div class="popup-content">
<div class="frameid-2"></div>
</div>
<div id="btn-close2" class="btn-close" title="Закрыть" unselectable="on"></div>
</div>
<div id="hide-layout2" class="hide-layout"></div></div>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
[COLOR="RoyalBlue"]//скрипт, отвечающий за всплывающие окна их позиционирование и загрузку iframe по щелчку[/COLOR]
<script>
$(document).ready(function(){
$('.click').on('click', function(){
var frameId = $(this).data('frameid'),
frameSrc = $(this).data('framesrc');
$('#popup'+frameId).hide();
$('#hide-layout'+frameId).css({opacity: .5});
alignCenter($('#popup'+frameId),this);
$(window).resize(function() {
alignCenter($('#popup'+frameId),this);
})
$('#hide-layout'+frameId).fadeIn(300);
$('#popup'+frameId).fadeIn(300);
$('.btn-close, #hide-layout'+frameId).click(function() {
$('#hide-layout'+frameId).fadeOut(300);
$('#popup'+frameId).fadeOut(300);
})
if(!document.getElementById(frameId)){
$('<iframe />', {
id : frameId,
src : frameSrc,
width:'100%',
height:'400px',
frameborder:'0',
}).appendTo('.frameid-'+frameId);
}
});
});
function alignCenter(elem,center) {
var scrollTop = center.scrollTop,
centerTop = $(center).offset().top;
elem.css({
left: ($(window).width() - elem.width()) / 2 + 'px',
top: (centerTop - scrollTop - elem.height() / 2) + 'px'
})
}
</script>
</body></html>
|
|
09.11.2016, 18:52
|
|
Аспирант
|
|
Регистрация: 06.04.2015
Сообщений: 42
|
|
|
Dilettante_Pro,
Отлииично :-) Спасибо!!! Все работает как и должно :-)
|
|
10.11.2016, 08:28
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,121
|
|
|
Сообщение от Ilya_Ru
|
|
Надо было всю страницу сайта представить?
|
Видно ты не понимаешь, что значит тестовый пример...  |
|
|
|
