Проблема с изменениям ajax окна и скрипта для Инфо
|
|
TiMzLeR | Воскресенье, 16 Октября 2016, 17:50 | Сообщение 16 |
| Angerfist, Fieldset оке попробую с этим .Если был бы опыт переписал бы я стили все под себя и сделал все как надо scrollbar и т.д просто там в коде я видел все лишь инфо о том как можно добавить у меня получается но горизонтальный вот в этом та и проблема
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
| [ AZ ] |
| |
Kosten | Воскресенье, 16 Октября 2016, 17:54 | Сообщение 17 |
| TiMzLeR, вообщем вот так у меня получилось, если подойдет, скину стили и код.
| [ RU ] |
| |
TiMzLeR | Воскресенье, 16 Октября 2016, 17:55 | Сообщение 18 |
| Angerfist, Да не то что бы понравилась от вовчика просто там все как надо нормально были бы деньги на счету купил бы оригинал и поставил просто похожие да и к тому он красивый ну а также новый просто scrollbar надо как то вывести а у меня это пока как бы не получсется...
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
| [ AZ ] |
| |
TiMzLeR | Воскресенье, 16 Октября 2016, 17:56 | Сообщение 19 |
| Kosten, проблема в том что у меня еще одн инфа будет и вот тогда низ уйдет в низ
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
| [ AZ ] |
| |
Kosten | Воскресенье, 16 Октября 2016, 18:02 | Сообщение 20 |
| TiMzLeR, здесь в окно не влезем больше информации.
| [ RU ] |
| |
TiMzLeR | Воскресенье, 16 Октября 2016, 18:04 | Сообщение 21 |
| Kosten, Попробуем как нибудь(
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
| [ AZ ] |
| |
Kosten | Воскресенье, 16 Октября 2016, 18:07 | Сообщение 22 |
| Цитата TiMzLeR ( ) Kosten, Попробуем как нибудь( Если скролл делать, то не красиво будет.
| [ RU ] |
| |
Kosten | Воскресенье, 16 Октября 2016, 18:09 | Сообщение 23 |
| TiMzLeR, а так не многовато будет для модального окна. Ведь в нем ставят описание или одну функцию.
| [ RU ] |
| |
TiMzLeR | Воскресенье, 16 Октября 2016, 18:09 | Сообщение 24 |
| Kosten, Да вроде на сайте webmaster-ucoz есть скролл и отлично смотрится...
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
| [ AZ ] |
| |
Kosten | Воскресенье, 16 Октября 2016, 18:15 | Сообщение 25 |
| Вообщем вот данные на этот скрин. Возможно пригодится!
Код <div class="webo4ka-bg-body"></div> <div class="webo4ka-okno"> <center><div class="webo4ka-fon"><a href="javascript://" onclick="$('.webo4ka-okno, .webo4ka-bg-body').fadeToggle(1000);" title="Закрыть окно" style="text-decoration:none; outline:none;"><div class="webo4ka-close"></div></a></div> <div class="webo4ka-body"><div>"Для чего нужны партнеры по Сайту" <ol class="rounded"> <li><a href="#">Партнеры: Нужны для сотрудничество помощи друг другу в продвижений сайта...</a></li> <li><a href="#">Партнеры: Нужны для улучшения активности сайта...</a></li> <li><a href="#">Партнеры: Нужны для улучшения репутаций сайта...</a></li> <li><a href="#">Партнеры: Нужны для поддержки помощи сайта...</a></li> <li><a href="#">Партнеры: Нужны для каких либо интересующих советов для сайта...</a></li> <li><a href="#">Партнеры: Нужны для осуществления каких либо предприятий для сайта...</a></li> <li><a href="#">Партнеры: Нужны для каких либо привидения навыков для сайта...</a></li> <li><a href="#">Партнеры: Нужны для каких либо способов решений исполняемых идей для сайта...</a></li> </ol> </div></div> <div class="webo4ka-foother"><a href="javascript://" onclick="$('.webo4ka-okno, .webo4ka-bg-body').fadeToggle(1000);" style="text-decoration:none; outline:none;"><span class="webo4ka-zakrit">Закрыть</span></a></div> </div></center> <a href="javascript://" onclick="$('.webo4ka-okno, .webo4ka-bg-body').fadeToggle(1000);"><fieldset class="legend-2">⇒Для чего нужны партнеры сайта?⇐</a></fieldset>
CSS
Код .webo4ka-bg-body {background: rgba(0,0,0,0.7); width:400%; height:400%; position:fixed; left: 0px; top: 0px; z-index:999; display:none;} .webo4ka-okno {background:#fff;position:fixed;top:10%;left:30%; z-index:1000;width: 640px; height:auto;border-radius:4px; box-shadow: 0 0 10px 1px rgba(0,0,0,0.3); display:none;} .webo4ka-fon {background: url(http://zornet.ru/SKRIPT/dsar/trend/2013_frozen-wide.jpg) 0px 0px no-repeat; background-size: 100%; border-top-left-radius:4px; border-top-right-radius:4px;width: 640px; height:210px;} .webo4ka-close {background: url(/Close_Box_Red.png) 0px 0px no-repeat; width:24px; height:24px; float:right; margin:4px 4px 0 0; opacity: 0.5;} .webo4ka-close:hover {opacity: 1.0; cursor:pointer;} .webo4ka-body {background:#fff; width:520px; height:auto;} .webo4ka-body div {padding:10px 10px;width: 530px; text-align:justify; line-height:1.8;} .webo4ka-foother {background: url(/3615680.png) 0px 0px no-repeat; background-size: 100%; width:500px; height:auto; padding:20px; border-bottom-left-radius:3px; border-bottom-right-radius:3px; text-align:center;} .webo4ka-zakrit {background: #1F5B88; border-radius:4px; color:#fff; font-size:14px;top: 80px; text-shadow:0 -1px 0 rgba(0, 0, 0, .2); text-align:center; box-shadow: 0 1px 1px rgba(0, 0, 0, .1);padding:8px 30px;/* text-align: center; */} .webo4ka-zakrit:hover {background: #0C74C4; box-shadow: 0 0px 10px rgb(48, 121, 255);} .rounded { counter-reset: li;list-style: none;font: 12px "Trebuchet MS", "Lucida Sans"; padding: 0;text-shadow: 0 1px 0 rgba(255,255,255,.5);/* text-align: center; */} .rounded a {position: relative;display: block;padding: .4em .4em .4em 2em;margin: .5em 0;background: #DAD2CA;color: #444;text-decoration: none;border-radius: .3em; transition: .3s ease-out;} .rounded a:hover { background: #E9E4E0; } .rounded a:hover:before { transform: rotate(360deg); } .rounded a:before { content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 10%; margin-top: -1.3em; background: #8FD4C1; height: 2em; width: 2em; line-height: 2em; border: .3em solid white; text-align: center; font-weight: bold; border-radius: 2em; transition: all .3s ease-out; }
| [ RU ] |
| |
Kosten | Воскресенье, 16 Октября 2016, 18:15 | Сообщение 26 |
| Цитата TiMzLeR ( ) Kosten, Да вроде на сайте webmaster-ucoz есть скролл и отлично смотрится Мне кажется Роман давно его убрал.
| [ RU ] |
| |
Kosten | Воскресенье, 16 Октября 2016, 18:25 | Сообщение 27 |
| TiMzLeR, не понимаю, почему это модальное окно не нравится, ширину выставлять нужно, а длинна на автомате идет.
| [ RU ] |
| |
Kosten | Воскресенье, 16 Октября 2016, 18:26 | Сообщение 28 |
| С красивым эффектом идет.
| [ RU ] |
| |
Kosten | Воскресенье, 16 Октября 2016, 18:35 | Сообщение 29 |
| TiMzLeR, вообщем на тот случай если передумаешь и поставишь нормально настроенное модальное окно, все данные пропишу. Как понимаешь, изображение можно убрать и поставить функцию или другое.
Там где открывать будешь.
Код <a href="#modal" class="openModal">Открыть модальное окно</a> <div id="modal" class="modal"> <div> <div class="text"> <div align="center"><img border="0" align="absmiddle" src="http://image.prntscr.com/image/454a3f941ff54885b1967d86c6902b84.png"></div> <ol class="rounded"> <li><a href="#">Партнеры: Нужны для сотрудничество помощи друг другу в продвижений сайта...</a></li> <li><a href="#">Партнеры: Нужны для улучшения активности сайта...</a></li> <li><a href="#">Партнеры: Нужны для улучшения репутаций сайта...</a></li> <li><a href="#">Партнеры: Нужны для поддержки помощи сайта...</a></li> <li><a href="#">Партнеры: Нужны для каких либо интересующих советов для сайта...</a></li> <li><a href="#">Партнеры: Нужны для осуществления каких либо предприятий для сайта...</a></li> <li><a href="#">Партнеры: Нужны для каких либо привидения навыков для сайта...</a></li> <li><a href="#">Партнеры: Нужны для каких либо способов решений исполняемых идей для сайта...</a></li> </ol> </div> <a href="#close" title="Закрыть">Закрыть</a> </div> </div>
CSS
Код /* Слой перекрытия */ .modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:9; /* Трансформации прозрачности при открытии */ transition:opacity 511ms ease-in; /*Скрываем изначально*/ opacity:0;pointer-events:none } /* Показываем модальное окно */ .modal:target { opacity:1;pointer-events:auto } /* Содержание */ .modal>div{ width:586px;background:#fff;position:relative;margin:9% auto; /*По умолчанию минимизируем анимацию*/ -webkit-animation:minimise 511ms linear; /*Придаем хороший вид*/ padding:31px; border-radius:7px;box-shadow:0 3px 9px #000; text-shadow:0 1px 0 #fff; } /*Изменяем анимацию при открытии модального окна*/ .modal:target>div{ -webkit-animation-name:bounce } .modal h2{ font-size:35px;padding:0 0 9px; } @-webkit-keyframes bounce{0%{-webkit-transform:scale3d(.1,.1,1); -webkit-box-shadow:0 3px 9px #000}55%{-webkit-transform:scale3d(1,1,1); -webkit-box-shadow:0 9px 9px #000}75%{-webkit-transform:scale3d(1,1,1); -webkit-box-shadow:0 0 9px #000}100%{-webkit-transform:scale3d(1,1,1); -webkit-box-shadow:0 3px 9px #000}} @-webkit-keyframes minimise{0%{-webkit-transform:scale3d(1,1,1)}100%{-webkit-transform:scale3d(.1,.1,1)}} /*Ссылка на кнопку Закрыть*/ .modal a[href="#close"]{position:absolute;right:0;top:0;color:transparent} /*Сбрасываем изменения*/ .modal a[href="#close"]:focus{outline:none} /*Создаем кнопку Закрыть*/ .modal a[href="#close"]:after{content:'X';display:block; /*Позиционируем*/ position:absolute;right:-9px;top:-9px;width:19px;padding:1px; /*Стили*/ text-decoration:none; text-shadow:none; text-align:center; font-weight:bold; background:#000; color:#fff; border:3px solid #fff; border-radius:19px; box-shadow:0 1px 3px #000 } .modal a[href="#close"]:focus:after,.modal a[href="#close"]:hover:after{-webkit-transform:scale(1.1,1.1); -moz-transform:scale(1.1,1.1); } .modal a[href="#close"]:focus:after{outline:0 solid #000} /*Открываем модальное окно*/a.openModal{} a.openModal:hover,a.openModal:focus{} .modal .modal_title{display:block;text-align:center;font-size:19pt}
.rounded { counter-reset: li; list-style: none;font: 12px "Trebuchet MS", "Lucida Sans"; padding: 0; text-shadow: 0 1px 0 rgba(255,255,255,.5);} .rounded a { position: relative; display: block; padding: .4em .4em .4em 2em; margin: .5em 0; background: #DAD2CA; color: #444; text-decoration: none; border-radius: .3em; transition: .3s ease-out; } .rounded a:hover { background: #E9E4E0; } .rounded a:hover:before { transform: rotate(360deg); } .rounded a:before { content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 10%; margin-top: -1.3em; background: #8FD4C1; height: 2em; width: 2em; line-height: 2em; border: .3em solid white; text-align: center; font-weight: bold; border-radius: 2em; transition: all .3s ease-out; }
| [ RU ] |
| |
TiMzLeR | Воскресенье, 16 Октября 2016, 19:28 | Сообщение 30 |
| Kosten, Спасибо за все, к завтрашнему дню уже во всем разберемся
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
| [ AZ ] |
| |