Принцип использования всплывающих окнов Div для динамического отображения контента: сначала используйте CSS и HTML, чтобы скрыть контент во всплывающих окнах, а затем использовать JavaScript (jQuery в этом уроке), чтобы отобразить их динамически. Этот эффект не только полностью использует ограниченное пространство макета, но и улучшает пользовательский опыт; Что еще более важно, это не влияет на эффект SEO (потому что он фактически существует на странице, но изначально невидим)
1. Определите DIV на HTML -странице и реализуйте то, что нам нужно отобразить в Div.
Кода -копия выглядит следующим образом:
<тело>
<div id = "login">
<h2> <img src = "images/close.png"/> login веб -сайта </h2>
<form id = "loginform">
<div> </div>
<div> Учетная запись: <input type = "text" name = "user" /> < /div>
<div> пароль: <input type = "password" name = "pass" /> < /div>
<div> <input type = "button" name = "sub" advale = "" /> < /div>
</form>
<div> Зарегистрировать новый пользователь | Забыли пароль? </div>
</div>
</body>
Одна картина стоит тысячи слов. Давайте посмотрим на скриншот эффекта этого всплывающего окна DIV:
2. стиль CSS, который я использую
Кода -копия выглядит следующим образом:
#авторизоваться {
Ширина: 350px;
Высота: 250px;
Граница: 1PX SOLID #CCC;
позиция: абсолютно;
дисплей: блок;
Z-Index: 9999;
Фон: #fff;
}
#login H2 {
Высота: 40px;
высота линии: 40px;
Текст-альбом: Центр;
размер шрифта: 14px;
СКАЖИ САМЕТ: 1PX;
Цвет:#666;
Фон: URL (Images/login_header.png) Repeat-x;
поля: 0;
Заполнение: 0;
Пограничный подвод: 1PX SOLID #CCC;
курсор: двигаться;
}
#login h2 img {
Поплавок: верно;
позиция: относительно;
Верх: 14px;
Справа: 8px;
курсор: указатель;
}
#login div.info {
Заполнение: 10px 0 5px 0;
Текст-альбом: Центр;
Цвет: Maroon;
}
#login div.user, #login div.pass {
размер шрифта: 14px;
Цвет:#666;
Подкладка: 5px 0;
Текст-альбом: Центр;
}
#login input.text {
Ширина: 200px;
Высота: 25px;
Граница: 1PX SOLID #CCC;
Фон: #fff;
размер шрифта: 14px;
}
#login .button {
Текст-альбом: Центр;
Заполнение: 15px 0;
}
#login input.submit {
Ширина: 107px;
Высота: 30px;
Фон: URL (Images/login_button.png) no-repeat;
граница: нет;
курсор: указатель;
}
#login .other {
Текст-альбом: верно;
Заполнение: 15px 10px;
Цвет:#666;
}
Главное, что нужно отметить, - это определение стиля DIV, потому что нам нужно центрировать отображение, мы используем абсолютное положение позиционирования: абсолютно; Во-вторых, поскольку это всплывающий слой, Div должен быть на самой внешней периферии, поэтому Z-индекс обычно устанавливается на очень большой, здесь мы устанавливаем его на Z-Index: 9999; Другой момент заключается в том, что сам Div скрыт и должен быть настроен на отображение: нет, но здесь нам нужно напрямую посмотреть на эффект, чтобы мы могли напрямую отобразить его, используя дисплей: block;
3. Мы должны позволить этому отображаться в центре, поэтому мы должны сначала получить высоту и ширину браузера. Если есть горизонтальное или вертикальное смещение стержня прокрутки, нам также необходимо получить длину и получить положение DIV в браузер посредством расчета.
Кода -копия выглядит следующим образом:
$ (document) .ready (function ()
{
jquery.fn.extend ({
Центр: функция (ширина, высота)
{
return $ (this) .css ("left", ($ (window) .width ()-width)/2+$ (window) .scrollleft ()).
css ("top", ($ (window) .height ()-высота)/2+$ (window) .scrolltop ()).
CSS ("ширина", ширина).
CSS («высота», высота);
}
});
});
Позвольте ему показать, нажав кнопку
Кода -копия выглядит следующим образом:
$ (".
{
$ ("#login"). Show (). Center (350,250); // Показать окно входа в систему
});
Диаграмма воспроизведения
4. может перетаскивать всплывающую рамку
Реализация кода
Кода -копия выглядит следующим образом:
$ (document) .ready (function ()
{
jquery.fn.extend ({
// функция перетаскивания
Drag: function () {
var $ tar = $ (это);
возврат $ (это) .mouseDown (function (e) {
if (e.target.tagname == "h2") {
var diffx = e.clientx - $ tar.offset (). слева;
var diffy = e.clienty - $ tar.offset (). Top;
$ (документ) .mouseMove (function (e) {
var Left = e.clientx - diffx;
var top = e.clienty - diffy;
if (осталось <0) {
слева = 0;
}
иначе if (слева <= $ (window) .scrollleft ()) {
слева = $ (окно) .scrollleft ();
}
else if (слева> $ (window) .width () +$ (window) .scrollleft () - $ tar.width ()) {
слева = $ (window) .width () +$ (window) .scrollleft () -$ tar.width ();
}
if (top <0) {
Верх = 0;
}
else if (top <= $ (window) .scrolltop ()) {
top = $ (window) .scrolltop ();
}
else if (top> $ (window) .height () +$ (window) .scrolltop () - $ tar.height ()) {
top = $ (window) .height () +$ (window) .scrolltop () - $ tar.height ();
}
$ tar.css ("слева", слева + 'px'). css ("top", top + 'px');
});
}
$ (документ) .mouseup (function () {
$ (this) .Unbind ("MouseMove");
$ (this) .Unbind ("MouseUp")
});
});
}
});
});
Здесь мы только нажимаем и перетаскиваем элементы H2 в содержании DIV. Если глобальный Div необходим, его можно изменить. Принцип перетаскивания: когда мышь нажимает на указанный элемент, получают координаты точки мыши и посредством расчета, изображение также перемещается в соответствующую позицию. Как только мышь нажимает на отмену, соответствующее событие нажатия будет отменено, а страница все еще.
Вызовите метод перетаскивания
Кода -копия выглядит следующим образом:
$ ("#login"). Drag ();
Теперь мы можем нажать на строку заголовка всплывающего окна и перетащить его в браузере по желанию.