Яндекс Apdate
Апдейты Яndex тИЦ
22.12.2015Последний |
19.11.2015
06.10.2015
Апдейты Яndex выдачи
18.03.2016Последний |
06.03.2016
20.02.2016
Апдейты ЯКаталога
25.03.2016Последний |
24.03.2016
23.03.2016
Форум для Веб-мастеров » CMS - система управления сайтом (контентом) » DataLife Engine


Ответить
 Модальное окно в DataLife Engine, Модальное окно в DataLife Engine
lionprizrak
27 марта 2012 20:02
Сообщение #1


Участник
  • 34

Репутация: 0
Группа: Посетители
Сообщений: 14
Регистрация: 5.03.2012
ICQ:--
Вот есть код модального окна

<script type="text/javascript">

function FuncName() {
$(function(){

$('#ModalWin').dialog({
autoOpen: true,
show: 'fade',
hide: 'fade',
width: 220,
height: 450,

});
});
}

</script>


я его вставляю все замечательно выводит но есть один нюанс когда текста много его просто не видно я хочу что бы справа появилось окно прокрутки мне сказали надо написать overflow, а куда именно не сказали, помогите плиз :help_me:
Перейти в начало страницы
JimaX
28 марта 2012 09:24
Сообщение #2


Активный участник
  • 51

Репутация: 2
Группа: Гости
Сообщений: 58
Регистрация: 1.03.2011
ICQ:318304
Здравствуйте, давно уже наверное вы ждали ответа, но вот появилось время и решил вам ответить.

В CSS существует замечательное свойство overflow, о котором вы писали выше, которое управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Это свойство имеет несколько значений, в нашем случае использовал overflow: auto, полоса прокрутки будет добавляться только по необходимости, т.е. когда размер текста превысит размеры блока. Для того чтобы прокрутка отображалась постоянно, необходимо свойству overflow присвоить значение scroll

Важно отметить, если вы выбрали для размещения контента модальное окно шириной 500px, следует задать ширину блока с текстом чуть меньшую в пределах 480px. Высоту можете выставить любую, хотя не стоит устанавливать слишком малую, узкое окно смотрится не совсем красиво, да и читателю придется постоянно пользоваться прокруткой. В своем примере я установил высоту div-контейнера в 300px, вам же никто не мешает экспериментировать с данным параметром, в ту или в другую сторону.

HTML/CSS

В конечном итоге, в разметке html, мы получаем незамысловатый и легко запоминающийся код, который в последствии, вы без особого труда вставите в модальное окно:

<div style="padding: 20px;
overflow: auto;
width: 480px;
height: 300px;
background-color: #ffffff;">
Бла-бла-бла - (текст) Бла-бла-бла - (текст) Бла-бла-бла - (текст)
Бла-бла-бла - (текст) Бла-бла-бла - (текст) Бла-бла-бла - (текст)
</div>

Если все сделаете правильно, то у вас должно получиться отличное всплывающее окно с полосой прокрутки, ну вот думаю и все, остальное если что не понятно читайте в нашей статье про модальные окна. :ad:
Перейти в начало страницы
lionprizrak
29 марта 2012 10:06
Сообщение #3


Участник
  • 34

Репутация: 0
Группа: Посетители
Сообщений: 14
Регистрация: 5.03.2012
ICQ:--
А куда именно его вставлять в css таблицу или сюда

<a href="#" onclick="FuncName()" value="Нажми на меню" class="bbcodes"></a>

<div  id="ModalWin" title="Здесь заголовок окна" style="display:none;text-align:left; " >
А здесь соответственно его содержимое, можно так же <b>HTML код и т.п.</b>
</div>

но если сюда так замучаешься постоянно вставлять.

а нельзя сразу в

<script type="text/javascript">

function FuncName() {
$(function(){

$('#ModalWin').dialog({
autoOpen: true,
show: 'fade',
hide: 'fade',
width: 220,
height: 450,

});
});
}

</script>
Перейти в начало страницы
 
 
Ответить
1чел. читают этот форум (гостей: 1)
Пользователей: 0