Highslide JS. Контент во всплывающем окне

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

При клике мышью по ссылке HTML-КОНТЕНТ

В чём красота мужчины, какова она и в чём ее суть?

Итак... Мне, например, не очень то важна внешность мужчины. Ведь красота мужчины в том, что он умеет хорошо и красиво говорить, обладает отменным чувством юмора и интеллектом! «Мужчина должен быть немного красивее обезьяны». Вы согласны со мной?

Мы, в меру своих возможностей, провели собственное небольшое журналистское расследование и вот что узнали - порой к нашему большому удивлению, что все мужчины – современные эталоны красоты.

Объем мирового рынка мужской косметики, оценивается в 16 миллиардов долларов (для тех, кто не дружит с цифрами, переводим - это много!). Более того, это один из наиболее перспективных, динамично развивающихся сегментов мирового рынка. А особые надежды специалисты возлагают на страны Азии и Ближнего Востока, в частности, Китай, а также Бразилию и Россию.

открывается всплывающее окно с контентом.

Открытое окно можно перемещать, наведя курсор мыши на кнопку переместить до появления перекрестия стрелок и удерживая левой клавишей, а так же закрыть, кликнув на соответствующую кнопку. В нижнем правом углу есть треугольная кнопочка, при наведении курсора на неё появляется двойная стрелочка и надпись «Заголовок: размер». С помощью этой кнопочки можно менять размеры окна как в вертикали так и в горизонтали, точно так же, как и при изменении размеров открытых окон Windows. При уменьшении окна до критических размеров появляется полоса прокрутки.

Внизу в таблице код реализации эффекта:


<html>
<head>
<title>Highslide JS</title>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css">
<script type="text/javascript" src="highslide/highslide-with-html.js"></script>
<script type="text/javascript">
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
</script>
</head>
<body>
<div>
<a href="#" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html' } )"
		class="highslide">
	HTML-контент
</a>
<div class="highslide-html-content" id="highslide-html">
	<div class="highslide-header">
		<ul>
			<li class="highslide-move">
				<a href="#" onclick="return false">Переместить</a>
			</li>
			<li class="highslide-close">
				<a href="#" onclick="return hs.close(this)">Закрыть</a>
			</li>
		</ul>
	</div>
	<div class="highslide-body">Здесь разместите ваш текст.
    </div>
    <div class="highslide-footer">
        <div>
            <span class="highslide-resize" title="Размер">
            </span>
        </div>
    </div>
</div>
</div>
</body>
</html>

Исходники (268 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Распакуйте архив в отдельную папку. Папку highslide со всем содержимым закачайте в «корень» сайта, а HTML-документ откройте в браузере и проверьте работу. Если всё прекрасно работает, можно применять по назначению.

При копировании кода и вставке в страницу, соблюдайте последовательность действий:

Пропись стилей. (Стили писать обязательно в head).

Подключение скриптов (можно располагать, как в head, так и в body).

Здесь разместите ваш контент. Это может быть текст, либо текст с изображением.

Примечание: Папка highslide является универсальной для всех эффектов Highslide JS, поэтому её стоит закачать один раз на свой сайт. Не беспокойтесь, много места она не занимает, всего-то 887кб.

Думаю, для Вас не составит особого труда освоить данный материал, т.к. я постарался преподать всё в максимально доступной форме. Спасибо за внимание. До новых встреч! Успехов Вам! L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки