Как изменить отображения контента в модальном окне SimpleModal?

Question

[Павел Инки]

Привет всем.
Использую для модального окна SimpleModal на jQuery. Подскажите пожалуйста, кто знает, как сделать Заголовок и Подвал внутри модального окна фиксироваными, так что бы контент скролился внутри них?

<div id="simplemodal-container">

<div>Вот тут бы заголовок</div>

	<div class="simplemodal-wrap">
		<div id="simplemodal-data">
		
		Ну а тут куча контента со скролом
		
		</div>
	</div>
	
<div>А вот тут подвал</div>

</div>

Извините, что так не четко и не ясно. По другому не знаю как и объяснить.

Answer 1

[Михаил Чирский]

Тут не важно, что вы исп. это простая реализация на CSS, как вариант можно сделать так:

.header, .footer { height: 50px; position: fixed; }
.content { height: calc(100% - 100px); }

Хорошим примером, является Microsoft Azure и их система блейдов, там как раз исп. такой метод, где у них шапка фиксирована, а контент скролится. Ну необходимо привязать свою почту к ним, чтобы увидеть что то

Comments

[Михаил Чирский]

Надеюсь суть ясна)

[Павел Инки]

Тут не в верстке дело, SimpleModal обворачивает в контейнеры .simplemodal-container, .simplemodal-wrap и .simplemodal-data весь контент который попадает в модальное окно. Вопрос в том как вставить еще два дива (header и footer) между .simplemodal-container и .simplemodal-wrap.

[Михаил Чирский]

Павел Инки: Может, я что то не так понимаю, ну в первом же примере, есть и футер и шапка)
simplemodal.plasm.it

[Павел Инки]

Этот тоже хороший плагин. Но я использую - www.ericmmartin.com/projects/simplemodal

[Михаил Чирский]

Я его не использовал ниразу, ну в вашей ссылке уже в options нашел, вроде оно)

appendTo [String:'body']
The jQuery selector to append the elements to. For ASP.NET, use 'form'.

Лучший способ погуглить, нет ничего невозможного, ну я обычно свои modal юзаю, т.к могу их кастомить как угодно, да и удобнее настраивать, когда просят что то добавить на лету)

[Павел Инки]

Кстати, в модальном окне, который ты предложил, при скролинге пролистывается задний контент, а не контент внутри модального окна, а если контента в модальном окне больше?

[Михаил Чирский]

Я не юзаю готовые решения обычно) ну знаю, что все окна работают по стандартному принципу, если больше контента, ограничение вводят и появляется тот самый скрол, который вы хотите, ну обычно окна исп. с малой информацией, для форм, статусов и всякой мелочи, если вы знаете Js, или Jq, я бы советовал сделать свое modal-window, готовые решения хорошо, ну не всегда есть возможность сделать то, что хочется, без костылей.

[Михаил Чирский]

Если очень надо, чтобы задний контент не пролистывался, в callback ф-цию, когда окно открыто можно добавить в body, overflow: hidden

[Павел Инки]

Спасибо, Михаил, за уделенное внимание! Ваши советы навели меня на мысли, которые в итоге решили проблему )

[Михаил Чирский]

Рад был помочь)