• Страница 2 из 2
  • «
  • 1
  • 2
Модератор форума: -SAM-  
Проблема с изменениям ajax окна и скрипта для Инфо
TiMzLeR
Воскресенье, 16 Октября 2016, 17:50 | Сообщение 16
Оффлайн
Проверенные
Сообщений:410
Награды: 0
Angerfist, Fieldset оке попробую с этим .Если был бы опыт переписал бы я стили все под себя и сделал все как надо scrollbar и т.д просто там в коде я видел все лишь инфо о том как можно добавить
Код
overflow-y: scroll;
у меня получается но горизонтальный вот в этом та и проблема


Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
Страна: (AZ)
Kosten
Воскресенье, 16 Октября 2016, 17:54 | Сообщение 17
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
TiMzLeR, вообщем вот так у меня получилось, если подойдет, скину стили и код.

Прикрепления: 8848704.jpg (85.0 Kb)
Страна: (RU)
TiMzLeR
Воскресенье, 16 Октября 2016, 17:55 | Сообщение 18
Оффлайн
Проверенные
Сообщений:410
Награды: 0
Angerfist, Да не то что бы понравилась от вовчика просто там все как надо нормально были бы деньги на счету купил бы оригинал и поставил просто похожие да и к тому он красивый ну а также новый просто scrollbar надо как то вывести а у меня это пока как бы не получсется...

Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
Страна: (AZ)
TiMzLeR
Воскресенье, 16 Октября 2016, 17:56 | Сообщение 19
Оффлайн
Проверенные
Сообщений:410
Награды: 0
Kosten, проблема в том что у меня еще одн инфа будет и вот тогда низ уйдет в низ

Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
Страна: (AZ)
Kosten
Воскресенье, 16 Октября 2016, 18:02 | Сообщение 20
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
TiMzLeR, здесь в окно не влезем больше информации.
Страна: (RU)
TiMzLeR
Воскресенье, 16 Октября 2016, 18:04 | Сообщение 21
Оффлайн
Проверенные
Сообщений:410
Награды: 0
Kosten, Попробуем как нибудь(

Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
Страна: (AZ)
Kosten
Воскресенье, 16 Октября 2016, 18:07 | Сообщение 22
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Цитата TiMzLeR ()
Kosten, Попробуем как нибудь(

Если скролл делать, то не красиво будет.
Страна: (RU)
Kosten
Воскресенье, 16 Октября 2016, 18:09 | Сообщение 23
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
TiMzLeR, а так не многовато будет для модального окна. 11a
Ведь в нем ставят описание или одну функцию.
Страна: (RU)
TiMzLeR
Воскресенье, 16 Октября 2016, 18:09 | Сообщение 24
Оффлайн
Проверенные
Сообщений:410
Награды: 0
Kosten, Да вроде на сайте webmaster-ucoz есть скролл и отлично смотрится...

Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
Страна: (AZ)
Kosten
Воскресенье, 16 Октября 2016, 18:15 | Сообщение 25
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Вообщем вот данные на этот скрин. Возможно пригодится!

Код
<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
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Цитата TiMzLeR ()
Kosten, Да вроде на сайте webmaster-ucoz есть скролл и отлично смотрится

Мне кажется Роман давно его убрал.
Страна: (RU)
Kosten
Воскресенье, 16 Октября 2016, 18:25 | Сообщение 27
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
TiMzLeR, не понимаю, почему это модальное окно не нравится, ширину выставлять нужно, а длинна на автомате идет.

Прикрепления: 1079907.png (90.9 Kb)
Страна: (RU)
Kosten
Воскресенье, 16 Октября 2016, 18:26 | Сообщение 28
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
С красивым эффектом идет.
Страна: (RU)
Kosten
Воскресенье, 16 Октября 2016, 18:35 | Сообщение 29
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
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;
}
Прикрепления: 9856848.png (72.0 Kb)
Страна: (RU)
TiMzLeR
Воскресенье, 16 Октября 2016, 19:28 | Сообщение 30
Оффлайн
Проверенные
Сообщений:410
Награды: 0
Kosten, Спасибо за все, к завтрашнему дню уже во всем разберемся 09a

Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
Страна: (AZ)
  • Страница 2 из 2
  • «
  • 1
  • 2
Поиск: