SEO продвижение сайтов

Всплывающее модальное окно на jQuery

Всплывающее модальное окно на jQuery

Необходимо создать три файла или скачть modal-window-js архив примера.

И так создаем HTML-файл - index.html

<!DOCTYPE html><html dir="ltr" lang="<?php echo $document->language; ?>">
<head>
<title>Вслывающее окно</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="/my.js"></script>
<link rel="stylesheet" href="/style.css" media="screen">
</head><body>

<div id="wrap-gen"></div>
<div class="window">
<span class="close">Закрыть</span>
</div>

<p><span class="link-gen">Вызвать модальное окно</span></p>

</body></html>

И так создаем CSSL-файл - style.css

* {margin:0; padding:0;}

/*Фон*/
#wrap-gen {display:none; position:fixed; left:0; right:0; bottom:0; top:0; background:rgba(0, 0, 0, .3); padding:10px; z-index:1000;}

/*Окно*/
.window {display:none; position:absolute; width:250px; height:300px; margin:10px auto; background:#fff; z-index:2000;
left:0; right:0; top:0; bottom:0; padding:5px; border:1px solid #666;}

/*Закрыть*/
.close {cursor:pointer; position:absolute; top:0px; right:5px; padding:5px; color:#f00;}

/*НЕ важное оформление ссылки вызова окна*/
p {margin:800px 0 100px; text-align:center;}
.link-gen {display:inline-block; border:1px solid #f00; padding:2px 10px; cursor:pointer; background-color:#ffb6c1;}

И так создаем JavaScript-файл - my.js

$(document).ready(function() {

/*Показать ОКНО*/
$('.link-gen').click(function(){poka2('#wrap-gen',0); pokaz('.window',400);});
/*Скрыть ОКНО по фону по close*/
$('#wrap-gen, .close').click(function(){skryt('#wrap-gen',0); skryt('.window',200);});

/*ф-ия Скрыть*/
function skryt(id,sp) {$(id).hide(sp);}
/*ф-ия показ*/
function pokaz(id,sp) {$(id).css({'top':$(window).scrollTop()}).show(sp);} /*Окно*/
function poka2(id,sp) {$(id).show(sp);} /*Фон*/

});

Скачать modal-window-js.rar архив примера можно здесь.

Автор: Алехин Геннадий (14.04.2018)

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


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

Web-технологии

Событие в JavaScript

Событие в JavaScript - это определённое действие, которые вызвано либо пользователем, либо браузером.

Например:

События мыши:

  • click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
  • contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
  • mouseover / mouseout – когда мышь наводится на / покидает элемент.
  • mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
  • mousemove – при движении мыши.

События на элементах управления:

  • submit – пользователь отправил форму
  • focus – пользователь фокусируется на элементе, например нажимает на <input type="text" />.
Подробнее...

Универсальный обход по массиву

Предлагаю вашему вниманию PHP-код - универсальный обходчик любого массива с любым представлением. Используем две функции: 1) функция с циклом (метод ArrFor() в классе) и 2) функция (как аргумент) с оформлением результатов обхода по массиву в цикле.

Подробнее...

JavaScript - основы (ES6)

ECMAScript 6 (или ES6) - это новая версия JavaScript 2015г, в которую добавлен новый функционал, которая на сегодня поддерживается всеми современными браузерами.

Переменные и комментарии

JavaScript - не строго типизированный язык. Переменные обозначаются так:

	let name='Геннадий'//Строка
	console.log(name)  //Геннадий - отображается в консоли

	var age=40      //Число(без кавычек) VAR (глобальная) - устарело, не использовать!
	console.log(age)//40 - отображается в консоли

	const prof="Программист"//Это константа
	console.log(prof)//Программист - отображается в консоли

	// - это однострочный комментарий

	/*
		тут 
		многострочные 
		комментарии
	*/

Подробнее...
Интересные статьи

Диалектические противоречия или чего хотят современные женщины

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

Многие женщины, живущие в современном мире, традиционно имеют как минимум два взаимоисключающих убеждения в отношении взаимодействия с мужчинами для создания такого союза.

Подробнее...

Почему мужчинам опасно регистрировать брак в России

Почему мужчинам опасно регистрировать брак в России

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

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

Подробнее...

День Победы со слезами на глазах...

День Победы со слезами на глазах...

Дорогие друзья, вот и прошёл пожалуй самый светлый праздник для нашей страны, для нашего народа - ДЕНЬ ПОБЕДЫ - 9 мая.

Но, как именно прошёл праздник 75-летия ПОБЕДЫ в этом году, я хочу напомнить сегодня, спустя 4 дня от празднования исторической даты.

У меня такое ощущение, как будто никто не заметил, что ПОЛИЦАИ по всей стране в этот день задерживали, арестовывали и штрафовали именно за память о Победе, за возложение цветов к памятникам нашим павшим героям.

Подробнее...

Оставить заявку

Закрыть
Заполните фрму и отправьте нам заяку
Заполните все обязательные поля*
captcha
Перезагрузить