Нужна помощь. Сам не могу разобраться..
|
Sk1LL,
в чём сложность написать html и css для трёх блоков? |
Sk1LL,
допишите остальное сами
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
<!-- сюда стили для блоков -->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(window).load(function () {
function resize(){
$('#modal').height(window.innerHeight - 50);
}
$( window ).resize(function() {
resize();
});
resize();
function refresh_close(){
$('.close').click(function(){
$(this).parent().fadeOut(200);
});
}
refresh_close();
var fb1 = '<div id="modal-full">содержимое 1 окна</div>';
var fb2 = '<div id="modal-full">содержимое 2 окна</div>';
var fb3 = '<div id="modal-full">содержимое 3 окна</div>';
$('#f1').click(function(){
$("#modal-full").remove();
$("#modal").append(fb1);
$("#modal-full").addClass('animated ' + 'effect1');
refresh_close();
});
$('#f2').click(function(){
$("#modal-full").remove();
$("#modal").append(fb2);
$("#modal-full").addClass('animated ' + 'effect1');
refresh_close();
});
$('#f3').click(function(){
$("#modal-full").remove();
$("#modal").append(fb3);
$("#modal-full").addClass('animated ' + 'effect1');
refresh_close();
});
});
</script>
</head>
<body>
<!-- сюда ссылки и тд -->
</body>
</html>
|
рони, вы шутите или нет? Вы вообще о чем? Страница, сверстана, стили написаны, скрипт работает...
Я не могу упростить вот эту конструкцию..
$('#f1').click(function(){
$("#modal-full").remove();
$("#modal").append(fb1);
$("#modal-full").addClass('animated ' + 'effect1');
refresh_close();
});
$('#f2').click(function(){
$("#modal-full").remove();
$("#modal").append(fb2);
$("#modal-full").addClass('animated ' + 'effect1');
refresh_close();
});
$('#f3').click(function(){
$("#modal-full").remove();
$("#modal").append(fb3);
$("#modal-full").addClass('animated ' + 'effect1');
refresh_close();
});
Упростить надо потому что на странице будет более сотни ссылок. И сотня таких блоков в скрипте это ужастно. ..... |
Sk1LL,
получите код, когда раслабитесь и напишите 10 строк, чтобы можно было понять хотбы что такое кнопка close. макет это то что в посте 13 -- ваша страница и сотни кнопок не нужны -- нужны три кнопки для примера, но рабочие |
Цитата:
Sk1LL, Цитата:
|
модальное окно с разным содержимым
:cray:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.overlay {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 99999;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.popup {
background-color: #fff;
border: 3px solid #fff;
display: inline-block;
left: 50%;
opacity: 0;
padding: 15px;
width: 300px;
height: auto;
position: fixed;
text-align: justify;
top: 40%;
visibility: hidden;
z-index: 999999;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
border-radius: 11px;
}
.popup .close_window {
font-size: 13px;
display: block;
width: 6px;
height: 17px;
position: absolute;
padding: 1px 9px 4px 9px;
top: -15px;
right: -15px;
cursor: pointer;
color: #fff;
font-family: 'tahoma', sans-serif;
border-radius: 50%;
text-align: center;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.5);
background-color: #051fb8;
}
.popup .close_window:hover {
background-color: #FF0000;
border: 1px solid #00385E;
}
.popup .close_window:active {
background: #8f9be0;
}
a[id^="f"]{
cursor: pointer;
display: inline-block;
background-color: #0000FF;
color: #fff;
border-radius: 8px;
padding: 4px 9px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(window).load(function() {
var objHtml = {
'#f1' : 'содержимое 1 окна',
'#f2' : 'содержимое 2 окна',
'#f3' : 'содержимое 3 окна'
},
close = $(".close_window"),
overlay = $(".overlay"),
modal = $("#modal").add(overlay),
full = $("#modal-full");
$.each(objHtml, function(id, html) {
$(id).click(function(event) {
event.preventDefault();
full.html(html);
modal.css({
"opacity": "1",
"visibility": "visible"
})
})
});
close.add(overlay).click(function() {
modal.css({
"opacity": "0",
"visibility": "hidden"
})
})
});
</script>
</head>
<body>
<p><a id="f1">Ссылка 1</a></p>
<p><a id="f2">Ссылка 2</a></p>
<p><a id="f3">Ссылка 3</a></p>
<div class="overlay" title="окно"></div>
<div class="popup" id="modal">
<div class="close_window">x</div>
<div id="modal-full"></div>
</div>
</body>
</html>
|
Я тоже нихрена не понял, но Ванга с первого же поста предсказала ваше любимое делегирование. То есть нужен небольшой роутер на родительском элементе, который будет разбирать что именно нажато и если нажато что именно - загружать что затребовано куда надо.
|
Цитата:
Информации - овердохуя. Модальное окно - 1 шт. Все просто. Жмешь на пункт, получаешь инфу, пихаешь ее в блок. |
Тупикал задача - вывести доп-инфо из листинга в оверхдоухя тумбочек по щелчку на элементе в тумбочке. Скажем в тумбе фотка, название, цена. Щелкаем по "Быстрый просмотр" получаем блок поверх листинга с фоткой, ценой, названием, размерами, описанием и тыр-пыр.
|
| Часовой пояс GMT +3, время: 15:25. |