Свяжитесь с нами!


(+7 3452) 699-900

Мы вам перезвоним сразу после получения соощения.

Ваши контактные данные:

Сообщение:

Прочтите и примите условия соглашения политики конфиденциальности

Я принимаю условия "Политики конфиденциальности" Я не принимаю условия "Политики конфиденциальности"
Ваше заявка успешно отправлена!Close this notice.

Оставьте заявку на поддержку сайта!

Система управления сайта:

Вам необходимы доработки на сайте?

Да Нет

Вам необходимо обеспечение безопасности и еженедельные Backup сайта?

Да Нет

Ваши контакты:

Я принимаю условия "Политики конфиденциальности" Я не принимаю условия "Политики конфиденциальности"
Ваша заявка отправлена! Мы свяжемся с вами в ближайшее время.Close this notice.

Оставьте заявку на контекстную рекламу!

Реклама в Yandex.Директ

Да Нет

Реклама в Google AdWords

Да Нет

Проводилась ли ранее контекстная реклама вашего сайта?

Да, проводилась Нет, не проводилась

Есть ли у вас группы в социальных сетях?

Да, есть группа в Вконтакте/Facebook/Одноклассники Нет

Ваши контакты:

Я принимаю условия "Политики конфиденциальности" Я не принимаю условия "Политики конфиденциальности"
Ваша заявка отправлена! Мы свяжемся с вами в ближайшее время.Close this notice.

Оставьте заявку на SEO-продвижение!

Возраст вашего домена?

Проводилось ли SEO-продвижение ранее?

Да, ранее проводилось SEO Нет

Ваши контакты:

Я принимаю условия "Политики конфиденциальности" Я не принимаю условия "Политики конфиденциальности"
Ваша заявка отправлена! Мы свяжемся с вами в ближайшее время.Close this notice.

Оставьте заявку на создание сайта!

Ваш бюджет:

Какой тип сайта вам необходим?

Вам необходимо создать дизайн с "нуля":

Дизайн сайта

Мне нужен новый уникальный дизайн. У меня уже есть макет, сделанный дизайнером.

Элементы фирменного стиля

Мне нужен новый фирменный стиль У меня уже есть визитка/баннер/рекламная брошюра

Ваши контакты:

Я принимаю условия "Политики конфиденциальности" Я не принимаю условия "Политики конфиденциальности"
Ваша заявка отправлена! Мы свяжемся с вами в ближайшее время.Close this notice.
699 - 900

Всплывающее окно своими руками

Модальное окно, PopUp, ToolTip — все это всплывающие окна. Многих из новичков, кто только создал свой сайт и еще не знает, как сделать свой PopUp, ставит в тупик вопрос создания всплывающего окна. А бывает, что и у тех, кто уже давно занимается сайтами, встает задача, когда нужно всплывающее окно, которое должно работать без плагина, так как идет какой-нибудь конфликт в коде, или же просто, чтобы не перегружать систему. Что делать в таком случае? Вы можете обратиться к специалистам компании BrainWeb — они с радостью Вам помогут. Или же статья ниже, которая обязательно будет для Вас полезной.

 

Всплывающее окно: разметка страницы

Возьмем файл любое_название.html (чтобы создать файл с раширением «.html», создайте просто файл блокнота «.txt», нажмите переименовать и введите «.html»).

Стандартное содержимое пустого файла html:

 <html> <head> <title>Пример</title> </head> <body> </body> </html> 

Открыв такой файл в браузере, мы получим просто чистый лист, в заголовке которого будет написано «Пример».
Заполним наш файл каким-нибудь текстом. Текст-заполнитель можно взять на сайте https://ru.lipsum.com/. Там как раз есть генератор такого текста.
Сгенерировав текст, обернем его в тэги <div></div>. Чтобы страница смотрелась заполнено, можно написать в тэге <div> стиль style=’width:80%;margin:0 auto;’
Этот код задаст тексту ширину в 80% от ширины экрана и отцентрует блок <div>. Вставим все, что у нас получилось между тэгами  <body></body>. Сделаем первое слово «Lorem» нашей кнопкой, по нажатию на которую будет появляться модальное окно. Для этого обернем ее в любой тэг (я использую тэг <span>) и пропишем ей класс click. Этот класс мы используем для изменения внешнего вида слова, чтобы было понятно, что он кликабельный, а так же мы будем использовать его в скрипте, чтобы отлавливать нажатие по этой кнопке. В коде это будет выглядеть так:

 <html> <head> <title>Пример</title> </head> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A.click%7B%0Afont-weight%3Abold%3B%20%2F*%20%D0%A2%D0%B8%D0%BF%20%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B0%20-%20%D0%B6%D0%B8%D1%80%D0%BD%D1%8B%D0%B9%20*%2F%0Acolor%3A%23ff0000%3B%20%2F*%20%D0%A6%D0%B2%D0%B5%D1%82%20%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B0%20-%20%D0%BA%D1%80%D0%B0%D1%81%D0%BD%D1%8B%D0%B9%20*%2F%0A%7D%0A.click%3Ahover%7B%20%2F*%20%D0%A1%D1%82%D0%B8%D0%BB%D1%8C%20%D0%BF%D1%80%D0%B8%20%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B8%20%D0%BC%D1%8B%D1%88%D0%B8%20*%2F%0Acursor%3Apointer%3B%20%2F*%20%D0%9C%D0%B5%D0%BD%D1%8F%D0%B5%D0%BC%20%D0%BA%D1%83%D1%80%D1%81%D0%BE%D1%80%20*%2F%0Atext-decoration%3Aunderline%3B%20%2F*%20%D0%9F%D0%BE%D0%B4%D1%87%D0%B5%D1%80%D0%BA%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC%20%D1%88%D1%80%D0%B8%D1%84%D1%82%20*%2F%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" /> <body> <div style='width:80%;margin:0 auto;'> <span class='click'>Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec urna quis odio dignissim dictum. Vivamus pulvinar arcu quis nulla eleifend, faucibus iaculis sem imperdiet. Ut et augue elementum, luctus massa molestie, tempor est. Donec eget nulla libero. Ut varius eget ante sit amet fringilla. Ut nibh erat, venenatis id mi et, vehicula condimentum sem. Proin ac interdum libero. In lacinia vulputate fringilla. Aenean in ligula lectus. Cras at magna arcu. Phasellus congue, ante sed volutpat cursus, odio dui fringilla quam, non interdum erat tellus vitae magna. Pellentesque gravida dolor nisl, a vulputate lacus vestibulum non. Suspendisse interdum mi et turpis mollis, in malesuada nunc eleifend. In imperdiet, massa eget bibendum dignissim, massa turpis semper nunc, eu mollis nunc est ut nunc. Phasellus molestie placerat dolor quis pellentesque. Suspendisse libero massa, malesuada ut mauris sed, facilisis pharetra massa. Ut ullamcorper vitae tortor eget vestibulum. Fusce cursus felis sed nunc aliquet condimentum. Proin egestas venenatis tincidunt. Nulla dapibus felis nisi, nec lobortis neque laoreet at. Mauris tempor tellus sed ornare commodo. Vivamus condimentum enim quis risus sollicitudin, eget faucibus metus pharetra. Ut erat turpis, ullamcorper eget justo ac, eleifend lobortis lorem. Aenean cursus feugiat metus, id commodo nunc lacinia non. Etiam pharetra accumsan erat vitae dignissim. Sed at aliquam mauris. Pellentesque consectetur tincidunt enim interdum hendrerit. Maecenas gravida hendrerit vestibulum. Donec risus sem, finibus nec congue sit amet, accumsan et neque. Vivamus in dolor ullamcorper, posuere nisi sed, aliquet neque. Integer est turpis, accumsan ac massa non, dignissim bibendum magna. Proin tincidunt, nisi eu ultricies sollicitudin, urna ante interdum urna, sit amet laoreet metus lacus et lorem. Cras semper mi sit amet odio egestas vehicula. Sed ultrices cursus lacinia. Mauris eget placerat est. Fusce ultricies ornare risus nec efficitur. Nulla lacinia quam sed varius ornare. Quisque euismod facilisis arcu sit amet dapibus. Donec dictum quam ac dolor gravida viverra. Integer eget dolor nec sem rutrum finibus nec at ante. Vestibulum elementum nec tellus in efficitur. Mauris sit amet nisl ut ante interdum lacinia. Ut feugiat tempor leo a interdum. Curabitur mattis eu tortor ac auctor. Curabitur dignissim, arcu at ornare vulputate, justo elit congue lorem, vel ornare mi libero sed libero. Aliquam tristique commodo congue. Suspendisse porttitor et libero gravida luctus. Duis risus nulla, pretium in est ut, vehicula consequat ipsum. Nullam porta, neque id facilisis gravida, nunc enim ultricies tortor, non accumsan felis lorem in ipsum. Praesent ac bibendum diam. Donec ut blandit mi, eu egestas quam. Pellentesque ac mollis odio, eget vehicula ante. Integer suscipit, odio vel aliquam pretium, neque quam elementum elit, ac pretium velit orci id erat. Aenean in egestas nulla, a faucibus turpis. Aliquam gravida blandit sem, sed condimentum mi semper a. Sed malesuada id libero nec elementum. Sed posuere commodo ante. Etiam a orci finibus, pretium leo at, molestie nibh. Etiam pharetra pulvinar nunc, in convallis enim rutrum et. Sed cursus felis arcu, a volutpat arcu facilisis vitae. Donec laoreet lacus vel felis sagittis convallis id at neque. Duis enim dui, vulputate a mauris sit amet, lobortis aliquet mauris. Mauris convallis vehicula pellentesque. Curabitur viverra mi eu orci rutrum, ac accumsan arcu feugiat. Proin elementum sem tellus. Pellentesque imperdiet tempus tellus non facilisis. Donec in congue tortor, nec pellentesque arcu. Integer eget convallis felis, vitae feugiat libero. Mauris eleifend accumsan tristique. Morbi vel tellus et erat lobortis imperdiet ac quis urna. Aenean metus turpis, scelerisque id arcu et, dapibus sodales urna. Nulla risus quam, fermentum eu felis a, gravida suscipit leo. Etiam non pellentesque nulla, ut pulvinar magna. Vivamus velit ante, sagittis vitae lorem non, vulputate accumsan nisi. Sed vitae iaculis felis. Nulla urna arcu, lacinia nec tortor id, interdum egestas sem. Mauris dui purus, malesuada sed placerat a, tempor eu sem. Etiam placerat sapien ac diam malesuada rhoncus. Nullam viverra tortor non egestas ornare. Sed pulvinar ornare ipsum, nec consequat odio pharetra vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras at congue sem. Phasellus eu metus mollis, tempor justo ac, tincidunt odio. Etiam ornare enim nisl, at pulvinar libero consequat ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at urna quis urna dapibus lobortis. Vestibulum facilisis posuere felis quis dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce non consequat elit. Maecenas sit amet ex malesuada, elementum sem convallis, iaculis nisi. Phasellus vitae euismod elit. In a dictum odio. Sed in ultricies neque, in vestibulum orci. Proin elementum turpis ut dui molestie tincidunt. Sed pretium gravida lectus, in pharetra nulla porttitor vitae. Curabitur bibendum, tortor eu rhoncus tempus, mi velit facilisis enim, sed dignissim dolor libero ac diam. Etiam ultricies elit id turpis tempus condimentum in vitae urna. Aliquam semper et odio eget consequat. Cras purus elit, tempus ut tempor id, accumsan non nisl. Pellentesque mattis ligula quis viverra interdum. Mauris porttitor lacinia mattis. Donec accumsan non ipsum et ullamcorper. Quisque in sapien mattis, suscipit tortor id, elementum neque. Maecenas sed efficitur leo, eget pretium neque. Proin posuere suscipit faucibus. Fusce at suscipit purus, et convallis libero. Duis semper vestibulum dui non commodo. Aenean sit amet viverra tellus. Aliquam erat volutpat. Quisque lobortis consectetur risus, sed sagittis erat. Aenean eget volutpat sem. Pellentesque scelerisque sit amet mauris nec blandit. Mauris ut nisi in justo hendrerit laoreet. Nullam sagittis rutrum tortor, eleifend convallis velit molestie dapibus. Donec id blandit dolor. Duis ultricies vel augue ut consectetur. Curabitur et sapien et mauris aliquam volutpat quis feugiat mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla enim neque, interdum interdum lobortis ut, ornare a est. Morbi est nisi, rutrum vulputate semper id, pharetra fringilla nisi. Fusce at enim orci. Sed nulla enim, sagittis vel pharetra hendrerit, cursus sed diam. Morbi sed libero ex. Curabitur viverra placerat metus. Phasellus id fringilla arcu. Proin viverra malesuada libero, in placerat neque vestibulum et. Cras sem justo, rutrum a accumsan vitae, interdum id dolor. Nulla mi eros, iaculis at enim a, dapibus dictum est. In in augue ut dolor congue fringilla. Phasellus quis orci sed augue lobortis tincidunt at in dui. Maecenas pellentesque egestas ultricies. Vivamus non luctus risus, et varius velit. Quisque bibendum felis ut urna tempus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in erat massa. Aenean eget egestas lorem. Aenean vel lorem pellentesque, fermentum ex vitae, convallis magna. Nunc porta nibh sed velit lobortis, at pretium libero dictum. Phasellus posuere ac massa at malesuada. Cras a ligula luctus, auctor nisi ut, feugiat velit. Morbi fringilla justo nisl, eget pharetra orci suscipit a. Duis rutrum enim vel tempus congue. Pellentesque facilisis nulla lobortis sapien sodales malesuada. Pellentesque et ipsum commodo, semper risus ut, convallis urna. Donec bibendum nunc sed orci viverra, vel imperdiet nisi luctus. Integer elit purus, porta in consequat ut, vehicula et magna. Cras viverra nec turpis nec sollicitudin. Vivamus at urna ac dolor auctor eleifend in non erat. Nam tempus tempus fringilla. Nullam pellentesque sed tellus id euismod. Quisque suscipit viverra volutpat. Nam vulputate convallis iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque placerat, leo sit amet congue tristique, metus augue rutrum magna, eu congue lorem diam vitae arcu. Pellentesque et mi iaculis, porta magna sed, tempus lacus. Nam scelerisque a ipsum in facilisis. In hac habitasse platea dictumst. Quisque condimentum venenatis sapien. Nullam ac enim in dui viverra efficitur id vel leo. Ut sed pulvinar felis. Sed ac libero in tellus congue pharetra. Mauris in quam tincidunt lacus scelerisque molestie. Cras ut euismod nibh. Nunc tristique accumsan viverra. Donec sed velit orci. In hac habitasse platea dictumst. Cras id massa pretium lectus aliquam luctus. Curabitur molestie, purus ac elementum euismod, leo libero tristique est, vel dapibus velit tortor nec mauris. Fusce quis fringilla felis. Praesent orci elit, faucibus sit amet feugiat vel, ultrices venenatis enim. Vestibulum id lectus at odio tristique pharetra. Nullam commodo erat quam, id viverra mauris tincidunt id. Sed ullamcorper, nisl ut condimentum ullamcorper, nibh lectus euismod sem, nec convallis massa magna ac turpis. Maecenas eget libero eu felis aliquam ullamcorper vitae ac erat. Cras suscipit, lacus ultricies pretium fringilla, enim nisi euismod ligula, ac varius elit libero sed odio. Curabitur fermentum felis mattis ligula convallis iaculis. Quisque tincidunt augue a mauris cursus bibendum. Proin commodo euismod magna in vulputate. Suspendisse a ornare risus. Sed sed neque ac ante eleifend tristique vel at nisi. Sed velit neque, commodo non sagittis et, tincidunt ac turpis. Nullam ultricies felis non fermentum facilisis. Suspendisse vitae lacus a augue tincidunt iaculis. In elit felis, sollicitudin eu sapien imperdiet, sagittis aliquet dui. Praesent et ex accumsan, rhoncus magna ut, condimentum odio. Aliquam vitae tortor in lacus dignissim gravida eu nec justo. Donec fringilla tellus ac mauris interdum cursus. In et nisl mollis, commodo ligula at, feugiat turpis. Morbi eu vestibulum ex. Phasellus maximus pretium posuere. Donec placerat leo a nunc pellentesque aliquam. Morbi ac tempus est. Nulla facilisi. Praesent auctor et augue in fringilla. Cras velit turpis, ultricies vel efficitur in, consectetur vel lorem. Nulla sed posuere est, vitae tempus ex. Mauris sit amet porta velit, in tincidunt magna. Nam semper tortor ligula, nec dignissim odio tincidunt ut. Pellentesque et consectetur massa. Vestibulum nec posuere eros. Nam nulla ante, ornare ultrices rhoncus et, egestas ut est. Donec non erat tempor, sagittis nisi eget, consequat velit. Quisque at nibh turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque eu nunc ex. Vivamus fringilla orci nec lobortis tincidunt. Etiam quis rutrum sem, eu mollis neque. Curabitur ac finibus est, non fermentum ipsum. Suspendisse quis orci enim. Donec finibus vitae nulla a interdum. Curabitur mollis libero eget sem hendrerit porttitor. Curabitur placerat urna in massa fringilla interdum. Vivamus vitae elit quis orci rutrum ullamcorper. Cras nulla nisi, faucibus euismod risus ut, dapibus semper massa. Morbi ut nibh eu nisi imperdiet hendrerit vitae a ligula. Donec ut eros pulvinar, cursus sem eget, suscipit nunc. Aliquam blandit semper nibh. Cras nunc sapien, hendrerit ac tempus eget, malesuada et mi. Proin ac scelerisque magna. In consectetur ac ipsum et imperdiet. Cras non convallis leo, id consectetur arcu. Nam quis diam ut elit laoreet hendrerit. Ut viverra, nibh et ultrices pretium, mauris odio porta diam, id faucibus dolor nulla quis erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce diam lacus, condimentum ut orci id, pretium tempus augue. Aenean finibus justo et ex tristique feugiat vel sit amet tortor. Aenean sapien libero, dignissim ut libero pretium, venenatis ultricies eros. Donec vehicula efficitur ornare. Nam id facilisis turpis. Pellentesque interdum nisi at turpis vehicula, sit amet luctus mi tincidunt. Proin feugiat malesuada leo ut bibendum. Sed ut massa id massa tempor ultrices. Donec in diam molestie, porta nulla ut, commodo tellus. Fusce ac luctus dolor, vel bibendum orci. Nunc commodo velit nec nisi congue rutrum. Morbi nec elit ac nisl scelerisque tincidunt molestie semper mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vitae felis porta, tincidunt tellus vel, interdum risus. Vestibulum ac blandit tellus. Aliquam dapibus cursus enim, sed scelerisque lectus sollicitudin sagittis. Aenean nec libero massa. Nullam quam lectus, posuere et felis ac, sodales maximus ligula. Sed blandit nibh vel volutpat ullamcorper. Suspendisse feugiat libero eget lectus sagittis porta. In auctor tempor tellus, eu luctus ligula. Aenean interdum tincidunt odio, non tincidunt enim tristique in. Mauris et commodo lectus, ut tempor nisi. Aenean aliquam sit amet sem vitae lobortis. Etiam placerat urna sed augue ullamcorper, et volutpat nibh mattis. Nunc ornare augue ut orci vestibulum, nec volutpat sem egestas. </div> </body> </html> 

Вот как запущенный код будет выглядеть:

Теперь создадим еще один <div>, который будет у нас являться оверлеем (overlay), или по-другому слоем-подложкой для нашего всплывающего окна, и пропишем для него класс overlay:

 .overlay{ position: fixed; /* чтобы фон двигался вместе с экраном */ display: none; /* скрыт по умолчанию */ width: 100%; /* на всю ширину */ height: 100%; /* на всю высоту */ top: 0; /* отступ сверху 0 пикселей */ left: 0; /* отступ слева 0 пикселей */ background-color: rgba(0,0,0,0.5); /* черный фон с прозрачностью */ z-index: 2; /* важность слоя - 2, позволяющая ему быть над другими слоями */ cursor: pointer; /* при наведении мышки на фон, курсор будет сменяться */ } 

Этот код добавим сразу после тэга <style> и перед классом «.click»

 <div class='overlay'></div> 

Этот код добавим сразу после тэга <body> и перед текстом c его тэгом <div>

А теперь перейдем к самому всплывающему окну. Создадим еще один  <div>. В него можно записать, что угодно, но пусть у нас там будет фраза «Hello, World!» и кнопка «закрыть». Для красоты каждому из элементов пропишем свой класс:

 <html> <head> <title>Пример</title> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A.click%7B%0Afont-weight%3Abold%3B%20%2F*%20%D0%A2%D0%B8%D0%BF%20%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B0%20-%20%D0%B6%D0%B8%D1%80%D0%BD%D1%8B%D0%B9%20*%2F%0Acolor%3A%23ff0000%3B%20%2F*%20%D0%A6%D0%B2%D0%B5%D1%82%20%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B0%20-%20%D0%BA%D1%80%D0%B0%D1%81%D0%BD%D1%8B%D0%B9%20*%2F%0A%7D%0A.click%3Ahover%7B%20%2F*%20%D0%A1%D1%82%D0%B8%D0%BB%D1%8C%20%D0%BF%D1%80%D0%B8%20%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B8%20%D0%BC%D1%8B%D1%88%D0%B8%20*%2F%0Acursor%3Apointer%3B%20%2F*%20%D0%9C%D0%B5%D0%BD%D1%8F%D0%B5%D0%BC%20%D0%BA%D1%83%D1%80%D1%81%D0%BE%D1%80%20*%2F%0Atext-decoration%3Aunderline%3B%20%2F*%20%D0%9F%D0%BE%D0%B4%D1%87%D0%B5%D1%80%D0%BA%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC%20%D1%88%D1%80%D0%B8%D1%84%D1%82%20*%2F%0A%7D%0A.close%7B%0Afont-weight%3Abold%3B%20%2F*%20%D0%A2%D0%B8%D0%BF%20%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B0%20-%20%D0%B6%D0%B8%D1%80%D0%BD%D1%8B%D0%B9%20*%2F%0Acolor%3A%230000ff%3B%20%2F*%20%D0%A6%D0%B2%D0%B5%D1%82%20%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B0%20-%20%D1%81%D0%B8%D0%BD%D0%B8%D0%B9%20*%2F%0A%7D%0A.close%3Ahover%7B%20%2F*%20%D0%A1%D1%82%D0%B8%D0%BB%D1%8C%20%D0%BF%D1%80%D0%B8%20%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B8%20%D0%BC%D1%8B%D1%88%D0%B8%20*%2F%0Acursor%3Apointer%3B%20%2F*%20%D0%9C%D0%B5%D0%BD%D1%8F%D0%B5%D0%BC%20%D0%BA%D1%83%D1%80%D1%81%D0%BE%D1%80%20*%2F%0Atext-decoration%3Aunderline%3B%20%2F*%20%D0%9F%D0%BE%D0%B4%D1%87%D0%B5%D1%80%D0%BA%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC%20%D1%88%D1%80%D0%B8%D1%84%D1%82%20*%2F%0A%7D%0A.overlay%7B%0A%20%20%20%20position%3A%20fixed%3B%20%2F*%20%D1%87%D1%82%D0%BE%D0%B1%D1%8B%20%D1%84%D0%BE%D0%BD%20%D0%B4%D0%B2%D0%B8%D0%B3%D0%B0%D0%BB%D1%81%D1%8F%20%D0%B2%D0%BC%D0%B5%D1%81%D1%82%D0%B5%20%D1%81%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%BE%D0%BC%20*%2F%0A%20%20%20%20display%3A%20none%3B%20%2F*%20%D1%81%D0%BA%D1%80%D1%8B%D1%82%20%D0%BF%D0%BE%20%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E%20*%2F%0A%20%20%20%20width%3A%20100%25%3B%20%2F*%20%D0%BD%D0%B0%20%D0%B2%D1%81%D1%8E%20%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%83%20*%2F%0A%20%20%20%20height%3A%20100%25%3B%20%2F*%20%D0%BD%D0%B0%20%D0%B2%D1%81%D1%8E%20%D0%B2%D1%8B%D1%81%D0%BE%D1%82%D1%83%20*%2F%0A%20%20%20%20top%3A%200%3B%20%20%2F*%20%D0%BE%D1%82%D1%81%D1%82%D1%83%D0%BF%20%D1%81%D0%B2%D0%B5%D1%80%D1%85%D1%83%200%20%D0%BF%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D0%B5%D0%B9%20*%2F%0A%20%20%20%20left%3A%200%3B%20%20%2F*%20%D0%BE%D1%82%D1%81%D1%82%D1%83%D0%BF%20%D1%81%D0%BB%D0%B5%D0%B2%D0%B0%200%20%D0%BF%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D0%B5%D0%B9%20*%2F%0A%20%20%20%20background-color%3A%20rgba(0%2C0%2C0%2C0.5)%3B%20%2F*%20%D1%87%D0%B5%D1%80%D0%BD%D1%8B%D0%B9%20%D1%84%D0%BE%D0%BD%20%D1%81%20%D0%BF%D1%80%D0%BE%D0%B7%D1%80%D0%B0%D1%87%D0%BD%D0%BE%D1%81%D1%82%D1%8C%D1%8E%20*%2F%0A%20%20%20%20z-index%3A%202%3B%20%2F*%20%D0%B2%D0%B0%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%D1%81%D0%BB%D0%BE%D1%8F%20-%202%2C%20%D0%BF%D0%BE%D0%B7%D0%B2%D0%BE%D0%BB%D1%8F%D1%8E%D1%89%D0%B0%D1%8F%20%D0%B5%D0%BC%D1%83%20%D0%B1%D1%8B%D1%82%D1%8C%20%D0%BD%D0%B0%D0%B4%20%D0%B4%D1%80%D1%83%D0%B3%D0%B8%D0%BC%D0%B8%20%D1%81%D0%BB%D0%BE%D1%8F%D0%BC%D0%B8%20*%2F%0A%20%20%20%20cursor%3A%20pointer%3B%20%2F*%20%D0%BF%D1%80%D0%B8%20%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B8%20%D0%BC%D1%8B%D1%88%D0%BA%D0%B8%20%D0%BD%D0%B0%20%D1%84%D0%BE%D0%BD%2C%20%D0%BA%D1%83%D1%80%D1%81%D0%BE%D1%80%20%D0%B1%D1%83%D0%B4%D0%B5%D1%82%20%D1%81%D0%BC%D0%B5%D0%BD%D1%8F%D1%82%D1%8C%D1%81%D1%8F%20*%2F%0A%7D%0A.popup%7B%0Aposition%3Afixed%3B%20%20%2F*%20%D0%B2%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B5%20%D0%BE%D0%BA%D0%BD%D0%BE%20%D0%B1%D1%83%D0%B4%D0%B5%D1%82%20%D0%B4%D0%B2%D0%B8%D0%B3%D0%B0%D1%82%D1%8C%D1%81%D1%8F%20%D0%B2%D0%BC%D0%B5%D1%81%D1%82%D0%B5%20%D1%81%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%BE%D0%BC%20*%2F%0Awidth%3A400px%3B%20%20%2F*%20%D0%A8%D0%B8%D1%80%D0%B8%D0%BD%D0%B0%20*%2F%0Aheight%3A100px%3B%20%20%2F*%20%D0%92%D1%8B%D1%81%D0%BE%D1%82%D0%B0%20*%2F%0Aborder-radius%3A5px%3B%20%20%2F*%20%D0%A1%D0%BA%D1%80%D1%83%D0%B3%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%BA%D1%80%D0%B0%D0%B5%D0%B2%20%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0%20*%2F%0Abackground%3A%23fff%3B%20%20%2F*%20%D0%A6%D0%B2%D0%B5%D1%82%20%D1%84%D0%BE%D0%BD%D0%B0%20*%2F%0Atop%3A20%25%3B%20%20%2F*%20%D0%9E%D1%82%D1%81%D1%82%D1%83%D0%BF%20%D1%81%D0%B2%D0%B5%D1%80%D1%85%D1%83%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%20-%2020%25%20*%2F%0Aleft%3A50%25%3B%20%20%2F*%20%D0%9E%D1%82%D1%81%D1%82%D1%83%D0%BF%20%D1%81%D0%BB%D0%B5%D0%B2%D0%B0%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%20-%2050%25%20*%2F%0Amargin-left%3A-200px%3B%20%20%20%2F*%20%D0%A2%D0%B0%D0%BA%20%D0%BA%D0%B0%D0%BA%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%20%D0%B5%D1%89%D0%B5%20%D0%B8%20%D1%81%D0%B0%D0%BC%20%D0%B8%D0%BC%D0%B5%D0%B5%D1%82%20%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%83%2C%20%D0%BD%D0%B0%D0%B4%D0%BE%20%D1%8D%D1%82%D0%BE%20%D1%83%D1%87%D0%B5%D1%81%D1%82%D1%8C%20%D0%B8%20%D1%81%D0%B4%D0%B2%D0%B8%D0%BD%D1%83%D1%82%D1%8C%20%D0%B5%D0%B3%D0%BE%20%D0%BD%D0%B0%20%D0%BF%D0%BE%D0%BB%D0%BE%D0%B2%D0%B8%D0%BD%D1%83%20%D0%B5%D0%B3%D0%BE%20%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%8B%20%D0%B2%D0%BB%D0%B5%D0%B2%D0%BE%20*%2F%0Atext-align%3Acenter%3B%20%20%20%2F*%20%D0%A2%D0%B5%D0%BA%D1%81%D1%82%20%D0%B2%D0%BD%D1%83%D1%82%D1%80%D0%B8%20%D0%BD%D0%B0%D1%88%D0%B5%D0%B3%D0%BE%20%D0%BE%D0%BA%D0%BD%D0%B0%20%D0%BF%D0%BE%20%D1%86%D0%B5%D0%BD%D1%82%D1%80%D1%83%20*%2F%0Az-index%3A3%3B%20%2F*%20%D0%B2%D0%B0%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%D1%81%D0%BB%D0%BE%D1%8F%20-%203%2C%20%D0%BF%D0%BE%D0%B7%D0%B2%D0%BE%D0%BB%D1%8F%D1%8E%D1%89%D0%B0%D1%8F%20%D0%B5%D0%BC%D1%83%20%D0%B1%D1%8B%D1%82%D1%8C%20%D0%BD%D0%B0%D0%B4%20%D0%B4%D1%80%D1%83%D0%B3%D0%B8%D0%BC%D0%B8%20%D1%81%D0%BB%D0%BE%D1%8F%D0%BC%D0%B8%20*%2F%0A%7D%0A.tekst%7B%0Afont-size%3A20px%3B%20%20%20%2F*%20%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%20%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B0%20-%2020%20%D0%BF%D0%BE%D0%BA%D1%81%D0%B5%D0%BB%D0%B5%D0%B9%20*%2F%0Afont-weight%3Abold%3B%20%20%20%2F*%20%D0%A2%D0%B8%D0%BF%20%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B0%20-%20%D0%B6%D0%B8%D1%80%D0%BD%D1%8B%D0%B9%20*%2F%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" /> </head> <body> <div class='overlay'></div> <div class='popup'> Hello, <b>World!</b> <span class='close'>Закрыть</span> </div> <div style='width:80%;margin:0 auto;'> <span class='click'>Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec urna quis odio dignissim dictum. Vivamus pulvinar arcu quis nulla eleifend, faucibus iaculis sem imperdiet. Ut et augue elementum, luctus massa molestie, tempor est. Donec eget nulla libero. Ut varius eget ante sit amet fringilla. Ut nibh erat, venenatis id mi et, vehicula condimentum sem. Proin ac interdum libero. In lacinia vulputate fringilla. Aenean in ligula lectus. Cras at magna arcu. Phasellus congue, ante sed volutpat cursus, odio dui fringilla quam, non interdum erat tellus vitae magna. Pellentesque gravida dolor nisl, a vulputate lacus vestibulum non. Suspendisse interdum mi et turpis mollis, in malesuada nunc eleifend. In imperdiet, massa eget bibendum dignissim, massa turpis semper nunc, eu mollis nunc est ut nunc. Phasellus molestie placerat dolor quis pellentesque. Suspendisse libero massa, malesuada ut mauris sed, facilisis pharetra massa. Ut ullamcorper vitae tortor eget vestibulum. Fusce cursus felis sed nunc aliquet condimentum. Proin egestas venenatis tincidunt. Nulla dapibus felis nisi, nec lobortis neque laoreet at. Mauris tempor tellus sed ornare commodo. Vivamus condimentum enim quis risus sollicitudin, eget faucibus metus pharetra. Ut erat turpis, ullamcorper eget justo ac, eleifend lobortis lorem. Aenean cursus feugiat metus, id commodo nunc lacinia non. Etiam pharetra accumsan erat vitae dignissim. Sed at aliquam mauris. Pellentesque consectetur tincidunt enim interdum hendrerit. Maecenas gravida hendrerit vestibulum. Donec risus sem, finibus nec congue sit amet, accumsan et neque. Vivamus in dolor ullamcorper, posuere nisi sed, aliquet neque. Integer est turpis, accumsan ac massa non, dignissim bibendum magna. Proin tincidunt, nisi eu ultricies sollicitudin, urna ante interdum urna, sit amet laoreet metus lacus et lorem. Cras semper mi sit amet odio egestas vehicula. Sed ultrices cursus lacinia. Mauris eget placerat est. Fusce ultricies ornare risus nec efficitur. Nulla lacinia quam sed varius ornare. Quisque euismod facilisis arcu sit amet dapibus. Donec dictum quam ac dolor gravida viverra. Integer eget dolor nec sem rutrum finibus nec at ante. Vestibulum elementum nec tellus in efficitur. Mauris sit amet nisl ut ante interdum lacinia. Ut feugiat tempor leo a interdum. Curabitur mattis eu tortor ac auctor. Curabitur dignissim, arcu at ornare vulputate, justo elit congue lorem, vel ornare mi libero sed libero. Aliquam tristique commodo congue. Suspendisse porttitor et libero gravida luctus. Duis risus nulla, pretium in est ut, vehicula consequat ipsum. Nullam porta, neque id facilisis gravida, nunc enim ultricies tortor, non accumsan felis lorem in ipsum. Praesent ac bibendum diam. Donec ut blandit mi, eu egestas quam. Pellentesque ac mollis odio, eget vehicula ante. Integer suscipit, odio vel aliquam pretium, neque quam elementum elit, ac pretium velit orci id erat. Aenean in egestas nulla, a faucibus turpis. Aliquam gravida blandit sem, sed condimentum mi semper a. Sed malesuada id libero nec elementum. Sed posuere commodo ante. Etiam a orci finibus, pretium leo at, molestie nibh. Etiam pharetra pulvinar nunc, in convallis enim rutrum et. Sed cursus felis arcu, a volutpat arcu facilisis vitae. Donec laoreet lacus vel felis sagittis convallis id at neque. Duis enim dui, vulputate a mauris sit amet, lobortis aliquet mauris. Mauris convallis vehicula pellentesque. Curabitur viverra mi eu orci rutrum, ac accumsan arcu feugiat. Proin elementum sem tellus. Pellentesque imperdiet tempus tellus non facilisis. Donec in congue tortor, nec pellentesque arcu. Integer eget convallis felis, vitae feugiat libero. Mauris eleifend accumsan tristique. Morbi vel tellus et erat lobortis imperdiet ac quis urna. Aenean metus turpis, scelerisque id arcu et, dapibus sodales urna. Nulla risus quam, fermentum eu felis a, gravida suscipit leo. Etiam non pellentesque nulla, ut pulvinar magna. Vivamus velit ante, sagittis vitae lorem non, vulputate accumsan nisi. Sed vitae iaculis felis. Nulla urna arcu, lacinia nec tortor id, interdum egestas sem. Mauris dui purus, malesuada sed placerat a, tempor eu sem. Etiam placerat sapien ac diam malesuada rhoncus. Nullam viverra tortor non egestas ornare. Sed pulvinar ornare ipsum, nec consequat odio pharetra vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras at congue sem. Phasellus eu metus mollis, tempor justo ac, tincidunt odio. Etiam ornare enim nisl, at pulvinar libero consequat ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at urna quis urna dapibus lobortis. Vestibulum facilisis posuere felis quis dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce non consequat elit. Maecenas sit amet ex malesuada, elementum sem convallis, iaculis nisi. Phasellus vitae euismod elit. In a dictum odio. Sed in ultricies neque, in vestibulum orci. Proin elementum turpis ut dui molestie tincidunt. Sed pretium gravida lectus, in pharetra nulla porttitor vitae. Curabitur bibendum, tortor eu rhoncus tempus, mi velit facilisis enim, sed dignissim dolor libero ac diam. Etiam ultricies elit id turpis tempus condimentum in vitae urna. Aliquam semper et odio eget consequat. Cras purus elit, tempus ut tempor id, accumsan non nisl. Pellentesque mattis ligula quis viverra interdum. Mauris porttitor lacinia mattis. Donec accumsan non ipsum et ullamcorper. Quisque in sapien mattis, suscipit tortor id, elementum neque. Maecenas sed efficitur leo, eget pretium neque. Proin posuere suscipit faucibus. Fusce at suscipit purus, et convallis libero. Duis semper vestibulum dui non commodo. Aenean sit amet viverra tellus. Aliquam erat volutpat. Quisque lobortis consectetur risus, sed sagittis erat. Aenean eget volutpat sem. Pellentesque scelerisque sit amet mauris nec blandit. Mauris ut nisi in justo hendrerit laoreet. Nullam sagittis rutrum tortor, eleifend convallis velit molestie dapibus. Donec id blandit dolor. Duis ultricies vel augue ut consectetur. Curabitur et sapien et mauris aliquam volutpat quis feugiat mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla enim neque, interdum interdum lobortis ut, ornare a est. Morbi est nisi, rutrum vulputate semper id, pharetra fringilla nisi. Fusce at enim orci. Sed nulla enim, sagittis vel pharetra hendrerit, cursus sed diam. Morbi sed libero ex. Curabitur viverra placerat metus. Phasellus id fringilla arcu. Proin viverra malesuada libero, in placerat neque vestibulum et. Cras sem justo, rutrum a accumsan vitae, interdum id dolor. Nulla mi eros, iaculis at enim a, dapibus dictum est. In in augue ut dolor congue fringilla. Phasellus quis orci sed augue lobortis tincidunt at in dui. Maecenas pellentesque egestas ultricies. Vivamus non luctus risus, et varius velit. Quisque bibendum felis ut urna tempus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in erat massa. Aenean eget egestas lorem. Aenean vel lorem pellentesque, fermentum ex vitae, convallis magna. Nunc porta nibh sed velit lobortis, at pretium libero dictum. Phasellus posuere ac massa at malesuada. Cras a ligula luctus, auctor nisi ut, feugiat velit. Morbi fringilla justo nisl, eget pharetra orci suscipit a. Duis rutrum enim vel tempus congue. Pellentesque facilisis nulla lobortis sapien sodales malesuada. Pellentesque et ipsum commodo, semper risus ut, convallis urna. Donec bibendum nunc sed orci viverra, vel imperdiet nisi luctus. Integer elit purus, porta in consequat ut, vehicula et magna. Cras viverra nec turpis nec sollicitudin. Vivamus at urna ac dolor auctor eleifend in non erat. Nam tempus tempus fringilla. Nullam pellentesque sed tellus id euismod. Quisque suscipit viverra volutpat. Nam vulputate convallis iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque placerat, leo sit amet congue tristique, metus augue rutrum magna, eu congue lorem diam vitae arcu. Pellentesque et mi iaculis, porta magna sed, tempus lacus. Nam scelerisque a ipsum in facilisis. In hac habitasse platea dictumst. Quisque condimentum venenatis sapien. Nullam ac enim in dui viverra efficitur id vel leo. Ut sed pulvinar felis. Sed ac libero in tellus congue pharetra. Mauris in quam tincidunt lacus scelerisque molestie. Cras ut euismod nibh. Nunc tristique accumsan viverra. Donec sed velit orci. In hac habitasse platea dictumst. Cras id massa pretium lectus aliquam luctus. Curabitur molestie, purus ac elementum euismod, leo libero tristique est, vel dapibus velit tortor nec mauris. Fusce quis fringilla felis. Praesent orci elit, faucibus sit amet feugiat vel, ultrices venenatis enim. Vestibulum id lectus at odio tristique pharetra. Nullam commodo erat quam, id viverra mauris tincidunt id. Sed ullamcorper, nisl ut condimentum ullamcorper, nibh lectus euismod sem, nec convallis massa magna ac turpis. Maecenas eget libero eu felis aliquam ullamcorper vitae ac erat. Cras suscipit, lacus ultricies pretium fringilla, enim nisi euismod ligula, ac varius elit libero sed odio. Curabitur fermentum felis mattis ligula convallis iaculis. Quisque tincidunt augue a mauris cursus bibendum. Proin commodo euismod magna in vulputate. Suspendisse a ornare risus. Sed sed neque ac ante eleifend tristique vel at nisi. Sed velit neque, commodo non sagittis et, tincidunt ac turpis. Nullam ultricies felis non fermentum facilisis. Suspendisse vitae lacus a augue tincidunt iaculis. In elit felis, sollicitudin eu sapien imperdiet, sagittis aliquet dui. Praesent et ex accumsan, rhoncus magna ut, condimentum odio. Aliquam vitae tortor in lacus dignissim gravida eu nec justo. Donec fringilla tellus ac mauris interdum cursus. In et nisl mollis, commodo ligula at, feugiat turpis. Morbi eu vestibulum ex. Phasellus maximus pretium posuere. Donec placerat leo a nunc pellentesque aliquam. Morbi ac tempus est. Nulla facilisi. Praesent auctor et augue in fringilla. Cras velit turpis, ultricies vel efficitur in, consectetur vel lorem. Nulla sed posuere est, vitae tempus ex. Mauris sit amet porta velit, in tincidunt magna. Nam semper tortor ligula, nec dignissim odio tincidunt ut. Pellentesque et consectetur massa. Vestibulum nec posuere eros. Nam nulla ante, ornare ultrices rhoncus et, egestas ut est. Donec non erat tempor, sagittis nisi eget, consequat velit. Quisque at nibh turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque eu nunc ex. Vivamus fringilla orci nec lobortis tincidunt. Etiam quis rutrum sem, eu mollis neque. Curabitur ac finibus est, non fermentum ipsum. Suspendisse quis orci enim. Donec finibus vitae nulla a interdum. Curabitur mollis libero eget sem hendrerit porttitor. Curabitur placerat urna in massa fringilla interdum. Vivamus vitae elit quis orci rutrum ullamcorper. Cras nulla nisi, faucibus euismod risus ut, dapibus semper massa. Morbi ut nibh eu nisi imperdiet hendrerit vitae a ligula. Donec ut eros pulvinar, cursus sem eget, suscipit nunc. Aliquam blandit semper nibh. Cras nunc sapien, hendrerit ac tempus eget, malesuada et mi. Proin ac scelerisque magna. In consectetur ac ipsum et imperdiet. Cras non convallis leo, id consectetur arcu. Nam quis diam ut elit laoreet hendrerit. Ut viverra, nibh et ultrices pretium, mauris odio porta diam, id faucibus dolor nulla quis erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce diam lacus, condimentum ut orci id, pretium tempus augue. Aenean finibus justo et ex tristique feugiat vel sit amet tortor. Aenean sapien libero, dignissim ut libero pretium, venenatis ultricies eros. Donec vehicula efficitur ornare. Nam id facilisis turpis. Pellentesque interdum nisi at turpis vehicula, sit amet luctus mi tincidunt. Proin feugiat malesuada leo ut bibendum. Sed ut massa id massa tempor ultrices. Donec in diam molestie, porta nulla ut, commodo tellus. Fusce ac luctus dolor, vel bibendum orci. Nunc commodo velit nec nisi congue rutrum. Morbi nec elit ac nisl scelerisque tincidunt molestie semper mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vitae felis porta, tincidunt tellus vel, interdum risus. Vestibulum ac blandit tellus. Aliquam dapibus cursus enim, sed scelerisque lectus sollicitudin sagittis. Aenean nec libero massa. Nullam quam lectus, posuere et felis ac, sodales maximus ligula. Sed blandit nibh vel volutpat ullamcorper. Suspendisse feugiat libero eget lectus sagittis porta. In auctor tempor tellus, eu luctus ligula. Aenean interdum tincidunt odio, non tincidunt enim tristique in. Mauris et commodo lectus, ut tempor nisi. Aenean aliquam sit amet sem vitae lobortis. Etiam placerat urna sed augue ullamcorper, et volutpat nibh mattis. Nunc ornare augue ut orci vestibulum, nec volutpat sem egestas. </div> </body> </html> 

Вот как запущенный код будет выглядеть:

Скроем пока наше окно, добавив в его класс «.popup» строку «display:none;».
Почти все готово. Нам остается подключить библиотеку jquery и добавить скрипт для самого всплывающего окна.

Всплывающее окно: скрипт

Чтобы последняя версия jQuery автоматически подключалась к вашему сайту, нужно вверху страницы (верх самого кода) после тэга </head> добавить

 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery-latest.min.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> 

Ну и сам скрипт:

 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%24(document).ready(function()%7B%20%2F*%20%20%D0%96%D0%B4%D0%B5%D0%BC%2C%20%D0%BA%D0%BE%D0%B3%D0%B4%D0%B0%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0%20%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D1%81%D1%82%D1%8C%D1%8E%20%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%B8%D1%82%D1%81%D1%8F%20*%2F%0A%24('.click').click(function()%7B%20%20%2F*%20%20%D0%95%D1%81%D0%BB%D0%B8%20%D0%BA%D1%82%D0%BE-%D1%82%D0%BE%20%D0%BA%D0%BB%D0%B8%D0%BA%D0%BD%D1%83%D0%BB%20%D0%BF%D0%BE%20%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%83%20%D1%81%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%BC%20.click%20*%2F%0A%24('.overlay').css(%22display%22%2C%22block%22)%3B%20%20%2F*%20%D0%9F%D1%80%D0%BE%D0%BF%D0%B8%D1%81%D1%8B%D0%B2%D0%B0%D0%B5%D0%BC%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%83%20%D1%81%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%BC%20.overlay%20%D0%B4%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9%20%D1%81%D1%82%D0%B8%D0%BB%D1%8C%2C%20%D0%BF%D0%BE%D0%BA%D0%B0%D0%B7%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%B9%20%D1%81%D0%B0%D0%BC%20%D0%BE%D0%B2%D0%B5%D1%80%D0%BB%D0%B5%D0%B9%20*%2F%0A%24('.popup').css(%22display%22%2C%22block%22)%3B%20%20%2F*%20%D0%9F%D1%80%D0%BE%D0%BF%D0%B8%D1%81%D1%8B%D0%B2%D0%B0%D0%B5%D0%BC%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%83%20%D1%81%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%BC%20.popup%20%D0%B4%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9%20%D1%81%D1%82%D0%B8%D0%BB%D1%8C%2C%20%D0%BF%D0%BE%D0%BA%D0%B0%D0%B7%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%B9%20%D1%81%D0%B0%D0%BC%D0%BE%20%D0%B2%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B5%20%D0%BE%D0%BA%D0%BD%D0%BE%20*%2F%0A%7D)%3B%0A%0A%24('.close').click(function()%7B%20%20%2F*%20%20%D0%95%D1%81%D0%BB%D0%B8%20%D0%BA%D1%82%D0%BE-%D1%82%D0%BE%20%D0%BA%D0%BB%D0%B8%D0%BA%D0%BD%D1%83%D0%BB%20%D0%BF%D0%BE%20%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%83%20%D1%81%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%BC%20.close%20*%2F%0A%24('.overlay').css(%22display%22%2C%22none%22)%3B%20%20%2F*%20%D0%A1%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D0%B5%D0%BC%20.overlay%20*%2F%0A%24('.popup').css(%22display%22%2C%22none%22)%3B%20%20%2F*%20%D0%A1%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D0%B5%D0%BC%20.popup*%2F%0A%7D)%3B%0A%0A%24('.overlay').click(function()%7B%20%2F*%20%20%D0%95%D1%81%D0%BB%D0%B8%20%D0%BA%D1%82%D0%BE-%D1%82%D0%BE%20%D0%BA%D0%BB%D0%B8%D0%BA%D0%BD%D1%83%D0%BB%20%D0%BF%D0%BE%20%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%83%20%D1%81%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%BC%20.overlay%20*%2F%0A%24('.overlay').css(%22display%22%2C%22none%22)%3B%20%20%2F*%20%D0%A1%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D0%B5%D0%BC%20.overlay%20*%2F%0A%24('.popup').css(%22display%22%2C%22none%22)%3B%20%20%2F*%20%D0%A1%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D0%B5%D0%BC%20.popup*%2F%0A%7D)%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> 

Вот и все. Протестировать этот код можно здесь

Закажите свой сайт у нас

Инвестируйте
в будующее
вашего бизнеса

Лендинг-пейдж за 15000₽
Интернет магазин за 55000₽

Адрес нашего офиса

ООО "Брэйнвеб"
г.Тюмень

625000 ул,Республики 57
3 подъезд, 3 этаж, офис 6

ООО "Брэйнвеб"

625000 г.Тюмень
ул,Республики 57
3 подъезд, 3 этаж, офис 6

';

Наши контакты

E-mail:info@brainweb.org

E-mail:
info@brainweb.org

+7 3452 699 900

Часы работы: 10:00 - 18:00