| |
|
|
| | В макете http://fh7929mi.bget.ru/catalog/26.html имеются два модальных окна, всплывающих по клику на соответствующую ссылку.
Но чтобы я ни делал, всё равно получается так, что всплывшее окно прижимается к правой части экрана, а иногда даже метка закрытия вообще выходит за пределы экрана!
Как выровнять по центру это окно?
Полный код проще увидеть на сервере, в ключевые моменты такие:
Код вызова окна:
<a href="#" onClick="openWindow('rubric', '');">Руководство фирмы</a>
|
Код самого окна:
<div id="rubric_window" style="display:none;">
<div class="messageText">
<p> Текст в окне </p>
</div>
</div>
|
CSS окна:
.form {
outline: none;
}
#modalOverlay {
height: 100%;
}
#modalContainer {
height: auto;
width: auto;
left: 50%;
top: 50%;
border: 5px solid blue;
background-color: #FFC;
}
a.modalCloseImg {
background:url(../img/x.png) no-repeat;
width: 25px;
height: 29px;
display: block;
z-index: 3200;
position: absolute;
top: 0px;
right: 0px;
cursor: pointer;
}
.err_data {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #F00;
}
#catalog {
font-family: Lucida Console, Monaco, monospace;
font-size:14px;
}
|
| |
| |
|
|
| |
|
|
| |
для: Владимир55
(08.04.2014 в 18:01)
| | | Это - не модальное окно | |
| |
|
|
| |
|
|
| |
для: elenaki
(08.04.2014 в 18:17)
| | | И что? По этой причине его невозможно центрировать? | |
| |
|
|
| |
 339.9 Кб |
|
| |
для: Владимир55
(08.04.2014 в 18:37)
| | | задайте фиксированную ширину и высоту для modalContainer в CSS, и задайте margin-left и margin-top на минус половины ширины и высоты соотвественно. что чтобы центрировать без javascript.
p.s зачем эти ужасные комментарии в HTML? лучше пользуйтесь IDE и необходимость в них исчезнет сама собой.
============================> | |
| |
|
|
| |
|
|
| |
для: psychomc
(08.04.2014 в 18:48)
| | | Переходить на фиксированные размеры не хотелось бы, поскольку объем контента наперед неизвестен и на разных страницах каталога будет различным.
Для автоматического центрирования нет решения?
А если ширину и отступ задать в процентах? Это не годится? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(08.04.2014 в 18:55)
| | | всё очень просто: оставляете left:50%, top:50%, определяете размеры этого окна с помощью javascript (jquery), и проставляете margin-ы с помощью javascript (jquery) | |
| |
|
|
| |
|
|
| |
для: psychomc
(08.04.2014 в 19:01)
| | | всё очень просто: оставляете left:50%, top:50%, определяете размеры этого окна с помощью javascript (jquery), и проставляете margin-ы с помощью javascript (jquery)
Ну, для меня это совсем непросто!
Честно говоря, я этого сделать не сумею. Можете дать рабочий код? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(08.04.2014 в 19:05)
| | |
<script>
$(function() {
var $modal = $('#modalContainer'), width = $modal.width(), height = $modal.height();
$modal.css({
'left': '50%'.
'right': '50%',
'margin-left': (-width/2) + 'px',
'margin-top': (-height/2) + 'px'
});
});
</script>
|
| |
| |
|
|
| |
|
|
| |
для: psychomc
(08.04.2014 в 21:24)
| | | В скрипте диагностировалась небольшая синтаксическая ошибка, но и после ее исправления почему то все равно не работает http://fh7929mi.bget.ru/catalog/28.html
Может быть, я его не там разместил? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(08.04.2014 в 23:19)
| | |
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
#modalContainer {
position: absolute;
top: 50%;
left: 50%;
padding: 10px;
display:inline-block;
border:1px solid red;
}
</style>
<script>
$(function() {
var $modal = $('#modalContainer'), width = $modal.width(), height = $modal.height();
$modal.css({
'margin-left': (-width/2) + 'px',
'margin-top': (-height/2) + 'px'
});
});
</script>
</head>
<body>
<div id="modalContainer">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Владимир55
(08.04.2014 в 18:37)
| | | Надо называть вещи своими именами, если хотите получить ответ. | |
| |
|
|
|
| |
|
|
| |
для: Владимир55
(08.04.2014 в 18:01)
| | | Не вижу в вашем css ни одного стиля из вашего html
Элементарный попап
<div id="popup">
<div id="popup_text">
</div>
</div>
|
/*popup*/
#popup {
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
#popup_text {
color: white;
left: 50%;
top: 50%;
background-color: #bb272a;
margin-left: -200px;
margin-top: -100px;
width: 400px;
height: 200px;
position: fixed;
}
|
Закрытие
$('#popup').on('click', function(){
$('#popup').fadeOut();
});
|
Это в событие на открытие
Демонстрация
http://jsfiddle.net/Cu4B2/ | |
| |
|
|
