09.09.2016, 15:30
|
|
Интересующийся
|
|
Регистрация: 05.02.2016
Сообщений: 12
|
|
|
Нужна помощь. Сам не могу разобраться..
|
|
09.09.2016, 15:40
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Sk1LL,
в чём сложность написать html и css для трёх блоков?
|
|
09.09.2016, 15:43
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
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>
|
|
09.09.2016, 15:53
|
|
Интересующийся
|
|
Регистрация: 05.02.2016
Сообщений: 12
|
|
рони, вы шутите или нет? Вы вообще о чем? Страница, сверстана, стили написаны, скрипт работает...
Я не могу упростить вот эту конструкцию..
$('#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();
});
Упростить надо потому что на странице будет более сотни ссылок. И сотня таких блоков в скрипте это ужастно.
.....
|
|
09.09.2016, 16:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Sk1LL,
получите код, когда раслабитесь и напишите 10 строк, чтобы можно было понять хотбы что такое кнопка close.
макет это то что в посте 13 -- ваша страница и сотни кнопок не нужны -- нужны три кнопки для примера, но рабочие
|
|
09.09.2016, 16:24
|
|
Профессор
|
|
Регистрация: 21.09.2015
Сообщений: 196
|
|
Сообщение от Sk1LL
|
|
рони, вы шутите или нет?
|
Действительно... рони, у Вас такая высокая репутация, а телепатией так и не овладели, как же так?  На что же рассчитывать тогда нам, новичкам?? 
Sk1LL,
|
Сообщение от Sk1LL
|
|
[b]Страница, сверстана, стили написаны, скрипт работает...
|
А нам покажете? Тоже хотелось бы попробовать свои силы, но без элементов f1, f2, f3, notifications-full и т.д. не получается. |
|
09.09.2016, 20:12
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
модальное окно с разным содержимым
<!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>
|
|
11.09.2016, 06:18
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
Я тоже нихрена не понял, но Ванга с первого же поста предсказала ваше любимое делегирование. То есть нужен небольшой роутер на родительском элементе, который будет разбирать что именно нажато и если нажато что именно - загружать что затребовано куда надо.
|
|
11.09.2016, 06:20
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
Сообщение от Sk1LL
|
|
При нажатии на пункт списка нужно модальное окно, с информацией относящейся к пункту.
|
Список - овердохуя.
Информации - овердохуя.
Модальное окно - 1 шт.
Все просто. Жмешь на пункт, получаешь инфу, пихаешь ее в блок. |
|
11.09.2016, 06:24
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
Тупикал задача - вывести доп-инфо из листинга в оверхдоухя тумбочек по щелчку на элементе в тумбочке. Скажем в тумбе фотка, название, цена. Щелкаем по "Быстрый просмотр" получаем блок поверх листинга с фоткой, ценой, названием, размерами, описанием и тыр-пыр.
|
|
|
|
