 Модальные окна это модно и практично. Экономия места, стильное представление информации, концентрация внимания пользователей. Ниже приведу примеры и решение для встраивания модальных окон на jQuery и CSS.
Рассмотрим модальные окна facebox. Возможности этого плагина достаточно широки и универсальны. Выводить можно как просто текст, так и картинки и даже внешний файл, что очень удобно и может сильно облегчить некоторые задачи.
Подключаем к нашему сайту CSS, файл jquery и facebox. Все это нужно подключить в область между тегами head.
| Код | 1
2
3
| <link rel="stylesheet" href="style.css" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="facebox.js"></script> |
Подключить jquery можно напрямую с серверов гугла, я считаю такой способ практичнее и надежнее.
| Код | 1
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> |
Скрипт который инициализирует все это, нужно так же вставить в тело файла в котором мы планируем вывод.
| Код | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(jQuery) {
jQuery('a[rel*=facebox]').facebox({
loading_image : 'images/modal/loading.gif',
close_image : 'images/modal/closelabel.gif'
})
})
</script> |
Этот скрипт не должен конфликтовать с другими библиотеками, в нем заранее прописано jQuery.noConflict();
Стили нужные нам для правильного отображения окон:
| Код | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| #facebox .b {
background:url(images/modal/b.png);
}
#facebox .tl {
background:url(images/modal/tl.png);
}
#facebox .tr {
background:url(images/modal/tr.png);
}
#facebox .bl {
background:url(images/modal/bl.png);
}
#facebox .br {
background:url(images/modal/br.png);
}
#facebox {
position: absolute;
top: 0;
left: 0;
z-index: 100;
text-align: left;
}
#facebox .popup {
position: relative;
}
#facebox table {
border-collapse: collapse;
}
#facebox td {
border-bottom: 0;
padding: 0;
}
#facebox .body {
padding: 10px;
background: #fff;
width: 370px;
}
#facebox .loading {
text-align: center;
}
#facebox .image {
text-align: center;
}
#facebox img {
border: 0;
margin: 0;
}
#facebox .footer {
border-top: 1px solid #DDDDDD;
padding-top: 5px;
margin-top: 10px;
text-align: right;
}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
height: 10px;
width: 10px;
overflow: hidden;
padding: 0;
}
#facebox_overlay {
position: fixed;
top: 0px;
left: 0px;
height:100%;
width:100%;
}
.facebox_hide {
z-index:-100;
}
.facebox_overlayBG {
background-color: #000;
z-index: 99;
}
* html #facebox_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
} |
HTML код для вызова модальных окон:
| Код | 1
| <a href="картинка.jpg" rel="facebox">Выводим картику facebox</a> |
Выводим текст и тд:
| Код | 1
| <a href="#info" rel="facebox">Любой текст и тд facebox</a> |
Затем в сам блок вставить:
| Код | 1
2
3
| <div id="info" style="display:none;">
<p>Ваш текст</p>
</div> |
Выводим внешний файл:
| Код | 1
| <a href="путь к файлу/файл.html" rel="facebox">text</a> |
Вот что у нас получилось:
Текст:
Информация
Выводим произвольный текст.
Картинка:
Изображение
Файл:
Информация
Внешний файл дожен быть в utf-8, если есть русские символы.
Вот собственно и все. Пути к картинкам и файлам меняйте на свои.
Ниже привожу исходники:
Создать свой блог
Если у Вас есть хорошая идея, которой хочется поделиться в интернерте, то Ваш путь это создание блога. Как создать свой блог? Для этого досточно обратиться к советам, которых в интернете бесчисленное множество. Вот только важно попасть на те советы, котрорые обстоятельно, шаг за шагом проведут Вас по всему курсу создания своего блога.
Не торопитесь покупать электронные книги, постарайтесь найти бесплатный курс по созданию своего блога.
Бесплатный курс по созданию своего блога позволит даже самому неопытному пользователю интернета создать качественный блог самому. А как известно, все созданное своими руками увеличивает самооценку человека, повышает его самоуважение, что совсем немаловажный фактор в жизни человека.
Ссылка на источник обязательна: www.yworld.ru
|
