хочу сделать всплывающие окно кк на сайте Вконтакте, помогите..
Как сделать всплывающие окно на сайте?
Страница: 1
Сообщений 1 страница 5 из 5
Поделиться22013-11-17 13:52:02
Очень часто бывает нужно вывести пользователю какую-нибудь информацию или предложение в отдельном окне. Поскольку такая информация будет максимально легко доходить до посетителей. Однако, если использовать JavaScript для вывода обычных окон, то их будет блокировать браузер.
Я сразу приведу код, а потом немного его прокомментирую:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#parent_popup {
background: #000;
height: 100%;
opacity: 0.9;
position: fixed;
width: 100%;
z-index: 100;
top: 0;
left: 0;
}
#popup {
background-color: #00f;
height: 200px;
position: fixed;
top: 100px;
left: 40%;
color: #f00;
width: 300px;
}
</style>
</head>
<body>
<h1>Сайт</h1>
<h1>Сайт</h1>
<h1>Сайт</h1>
<h1>Сайт</h1>
<h1>Сайт</h1>
<h1>Сайт</h1>
<h1>Сайт</h1>
<h1>Сайт</h1>
<h1>Сайт</h1>
<div id="parent_popup">
<div id="popup">
<p style="cursor: pointer;" onclick="document.getElementById('parent_popup').style.display='none';">Закрыть</p>
<p>Текст в окне</p>
</div>
</div>
</body>
</html>
Во-первых, я вывел много h1 для того, чтобы показать, что когда контента много и пользователь будет проматывать вниз, окно будет идти вместе с прокруткой. В реальности, вместо h1 будет обычный контент на Вашем сайте.
Блок parent_popup занимается затемнением (background-color и opacity), а также выводится поверх всего остального контента (z-index: 100;).
А блок popup - это непосредственно само окно. Мы задаём его положение (top и left), а также делаем его fixed для того, чтобы он перемещался вместе с прокруткой страницы.
И, наконец, в коде есть текст "закрыть", кликнув по которому, окно будет закрыто. Это единственное место, где используется JavaScript.
Я могу сказать, что данное всплывающее окно с затемнением очень лёгкое в настройке и установке. Вы можете вставлять любой контент в любое место окна, а отсутствие вывода через JavaScript гарантирует, что это окно увидят все посетители.
Поделиться32013-11-17 14:07:26
мне нужно как в ВК, я слышал что это сделано на jquery
Поделиться42013-11-17 14:33:44
Энд, попробуй посмотри книги по джэйквиэри-несложно даже без знания джаваскрипт! Выучишь так же просто как и нтмл. Никаких сверхзадач только самое элементарное-окна анимация-все это очень просто в джэйквиэри.
Поделиться52013-11-17 14:38:26
Используется плагин jQuery lightbox. Погугли его и найдешь!
Страница: 1