Блог старого компьютера

Блог старого компьютера


Главная Jquery Всплывающее окно на jquery

Всплывающее окно на jquery

30.12.2012 16:00 Администратор Jquery
Печать PDF

Наверняка вы все видели  как при клике на изображение оно открывается в красивом всплывающем окне да еще и с затемнением заднего плана. Сейчас данные всплывающее окна довольно модны и используются практически в любом проекте где необходимо показать большое изображение, показать видио либо другую иную информаци. На самом деле сделать такое всплывающее окно на jquery совсем не сложно, можно даже по сути обойтись без использования этой замечательной библиотекти, а как это сделать я расскажу в данной статье.

Для создания всплывающего окна нам даже не понадобится куча графики, мы будем использовать всего лишь одно изображение по нажатию на которое будет закрываться окно. Все остальное мы будем делать с помощью каскадных таблиц стилей (CSS).

 

Создадим html файл и вставим в него базовые html теги. Далее в тег head подгрузим  jquery библиотеку, например с сервера гугл. В теге body создадим 2 тега div один с id=shadow другой с id=window. В тег с id=window вставим еще один тег с id=close. Думаю вам уже понятно за что каждый из тегов будет у нас отвечать. Ниже всех этих тегов создадим ссылку с id=url.

Далее добавим в тег head стили которые будут придавать вид нашим тегам div. Я оформлю эти теги так как мне хочется, что можете сделать и вы, но незабудьте тегу с id=window и shadow задать свойство display:none. Это свойство сделает эти теги скрытыми.

После всего что мы сделали нам необходимо написать код который будет открывать и закрывать наши скрытые блоки. Для этого вставляем в тег head исполняющий код. Вот вроде и все.

У меня вышел вот такой вот код:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#shadow {
background: black;
height: 100%;
opacity: 0.8;
position: fixed;
width: 100%;
z-index: 50;
display:none;
top:0;
left:0;
}

#window{
position:fixed;
left:50%;
top:50%;
width:800px;
height:500px;
margin-left:-400px;
margin-top:-250px;
border:1px solid black;
display:none;
background:white;
z-index:99;
box-shadow: 0px 0px 10px #000000;
}

#close{
background: url("closebox.png") 50% 50% no-repeat transparent;
border: medium none currentColor;
height: 30px;
position: absolute;
right: -15px;
top: -15px;
width: 30px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){

$('#close').click(function() {
$('#shadow').hide();
$('#window').hide();
});

$('#url').click(function() {
$('#shadow').show();
$('#window').slideToggle(500);
});

})
</script>
</head>
<body>
<div id="shadow"></div>
<div id="window">
<div id="close"></div>
</div>
<a href="#" id="url">Открыть окно</a>
</body>
</html>

 Все довольно просто и я думаю ненужно даже пояснений давать. Так же прилагаю небольшой архим с этим файлом чтоб вы могли посмотреть как это все работает на деле. И конечно же картинка всплывающего окна (к сожалению картинка не может передать вам того эффекта с которым открывается окно):

 Ну и архив с демкой Всплывающее окна на jquery можно скачать тут.

Комментарии  

 
+2 #10 Administrator 18.01.2014 09:56
Цитирую семён:
работает, только если код разместить в начале страницы. если тот же самый код повторить в низу страницы, то при клике, переходит в начало страницы, но ничего не открывает. как исправить?


Если вы потовряете его без изменение то он скорее всего конфликтует сам с собой. Если вы хотите сделать второе всплывающее окно то при повторении кода вам необходимо как в самом коде jquery так и в html заменить id-шники на другие. А вообще для такой задачи я бу не копировал код а переписал бы под нужды, чтоб не плодить копии кода.
Цитировать
 
 
0 #9 семён 07.01.2014 14:56
работает, только если код разместить в начале страницы. если тот же самый код повторить в низу страницы, то при клике, переходит в начало страницы, но ничего не открывает. как исправить?
Цитировать
 
 
0 #8 Maksim 28.11.2013 14:30
Spasibishe zdorovennoe!
Цитировать
 
 
0 #7 Administrator 27.09.2013 03:11
Цитирую Дмитрий:
А как доработать скрипт, чтобы можно было разные окна выводить при клике на разные ссылки?

Доработать код либо так что он открывал первый блок что ниже ссылки, либо передавать функции id блока который нужно открыть.
Цитировать
 
 
0 #6 Дмитрий 20.08.2013 09:18
А как доработать скрипт, чтобы можно было разные окна выводить при клике на разные ссылки?
Цитировать
 
 
-1 #5 Administrator 17.02.2013 05:40
Цитирую Jooker:
Цитирую Jooker:
Вещь отличная, а главное, что в Joomla интегрируется на ура, без заморочек. Сделал всплывающую форму авторизации. При описании работы оставлю ссылку на Вас обязательно. Удачи.

Как и обещал, вот статья с описанием, как и что. И конечно же со ссылкой на Вас.
http://universalstudio43.biz/veb-razrabotka/rabotaem-s-joomla/malenkie-khitrosti.html


Рад что вам пригодилось, да эффекты появления можно менять, к примеру я делал плавное появление с помощью animate который управлял прозрачностю блока. Если так делать то блоку по нажатию нужно задать сначала opacity:0, потом display:block ну а потом уже рекусивно менятть прохрачность с помощью animate.
Цитировать
 
 
+1 #4 Jooker 16.02.2013 15:19
Цитирую Jooker:
Вещь отличная, а главное, что в Joomla интегрируется на ура, без заморочек. Сделал всплывающую форму авторизации. При описании работы оставлю ссылку на Вас обязательно. Удачи.

Как и обещал, вот статья с описанием, как и что. И конечно же со ссылкой на Вас.
http://universalstudio43.biz/veb-razrabotka/rabotaem-s-joomla/malenkie-khitrosti.html
Цитировать
 
 
-1 #3 Jooker 16.02.2013 14:17
К стати, было бы не плохо список эффектов открытия окна.
Я, например, заменил slider на обычное show, хайд у окна установил 500, теперь окно появляется и прячется.
Цитировать
 
 
+2 #2 Jooker 16.02.2013 14:11
Вещь отличная, а главное, что в Joomla интегрируется на ура, без заморочек. Сделал всплывающую форму авторизации. При описании работы оставлю ссылку на Вас обязательно. Удачи.
Цитировать
 
 
-1 #1 Михаил 04.02.2013 16:41
То что искал, спасибо!
Цитировать
 

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?