CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 254   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

23

Модальное окно на jQuery

Jemand 80835 ,
JavaScript

1. CSS

a {color: #333; text-decoration: none; font-size: 25px;}
a:hover {color:#ccc; text-decoration:none}
#mask {
	position:absolute;
	left:0;
	top:0;
	z-index:9000;
	background-color:#000;
	display:none;
	font-family: Georgia;
	}
#boxes .window {
	position:absolute;
	left:0;
	top:0;
	width:440px;
	height:200px;
	display:none;
	z-index:9999;
	padding:20px;
	text-align: center;
	font-size: 25px;
	}
#boxes #dialog {
	width:375px;
	height:203px;
	padding:10px;
	background-color:#ffffff;
	}
.close {
	float: right;
	margin-top: 148px;
	}

2. Подключение jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Данный код добавляем в раздел <head>
3. JavaScript

$(document).ready(function() {
	$('a[name=modal]').click(function(e) {
		e.preventDefault();
		var id = $(this).attr('href');
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		$('#mask').fadeIn(1000);
		$('#mask').fadeTo("slow",0.8);
		var winH = $(window).height();
		var winW = $(window).width();
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
		$(id).fadeIn(2000);
	});
	$('.window .close').click(function (e) {
		e.preventDefault();
		$('#mask, .window').hide();
	});
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});
});

Данный код, также, добавляем в раздел <head>, но после кода подключения jQuery.
4. HTML

<a href="#dialog" name="modal">Простое модальное окно</a>
<div id="boxes">
	<div id="dialog" class="window">
	Простое модальное окно <br>
	<span><a href="#" class="close"/>Закрыть его</a>
	</div>
	<div id="mask"></div>
</div>

Демо

Рекламная пауза

» 23 комментария

  1. Окошко кул.А как сделать чтобы оно само открывалось при переходе на страницу,а не по нажатии на ссылку?

  2. как сделать чтобы в этом окне открывались внешние файлы .html?

  3. как сделать чтоб php скрипт открывался ?

  4. Повторю вопрос от adrc2 : “как сделать чтобы оно само открывалось при переходе на страницу,а не по нажатии на ссылку”. Опубликованный ответ “Зачем это нужно? Только посетителей отпугивать” глупый, т.к. не учитывает специфики сайтов. У меня на your-variant_ru сделан вызов модального окна справа “Задать вопрос”, но мне надо, что-бы оно АВТОМАТИЧЕСКИ выводилось через 10 секунд после загрузки страницы. Это как в бутике – к Вам подходит менеджер и спрашивает “Чем могу помочь?”.. Так и здесь – если посетитель задержался на странице – значит его что-то заинтересовало – тут и появляется этот вопрос, а если он быстро ушел – он окна и не увидит…
    Помогите советом в реализации этого, если это возможно, конечно. В инете ничего такого не нашел…

  5. … а еще лучше – сделайте, пожалуйста, пример “Выдвигающаяся панель при загрузке страницы с задержкой” и разместите на своем сайте.

  6. этом случае окно всплывает на расстоянии, как я понял вот таком
    $(id).css(‘top’, winW/1-$(id).width()/2);
    в моем случае, когда ссылка на открытие окна находится в футере страницы получается, что модальное окно открывается сверху страницы и пользователю не видно ничего, кроме маски..
    подскажит, как сделать так, чтобы оно всегда открывалось посередине экрана,.. ну или хотябы на половину экрана снизу??.
    Спасибо

  7. Почему диалоговое окно с темным фоном съехало на полэкрана?

  8. Привет, отличный пример, как быть если у меня несколько ссылок и у каждой свой оригинальный контент?

  9. Спасибо. Все понятно и просто. Только у меня вопрос: “возможно ли каким-то образом сделать на одной странице список ссылок на разные модальные окна?”

  10. я вас люблю
    в смысле, спасибо большое за понятные и функциональные скрипты)


Оставить комментарий