Способы создания окон PopUp / Хабр

Введение

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

Чаще всего такие окна появляются после совершения определенных действий на сайте, например, пользователь нажимает на ссылку «Заказать обратный звонок» и перед ним всплывает форма заказа.

Очень удобно использовать PopUp окна в связке с ajax, но это уже тема другого урока.

Всё больше и больше в сети начинает появляться веб-ресурсов, которые используют всплывающие окна PopUp. В пример можно привести всем знакомые социальные сети. Все лишние данные со скриншотов удалены.

How to implement login popup in html/javascript

You should probably read this:

http://en.wikipedia.org/wiki/Basic_access_authentication

and this:

http://www.php.net/manual/en/features.http-auth.php

In short words:

1 You can invoke this popup using special headers.

2 You can invoke this popup only before page starts loading.

3 You can’t do this using html js only.

4 You can’t invoke prompt windows with password-like inputs with pure js.

UPD:
That question was answered, having the following comment from author to main post in mind:

Is there a way to get the exact popup in the picture? i.e its a
browser based popup not styled?

I never stated, that one can not create SIMILAR styled popup with js html. The answer was about invoking the exact popup.

Jquery. как создать всплывающие окна авторизации

При разработке сайта бывает ситуация, когда на странице не хватает места для форм ввода логина, пароля и кнопки “ВОЙТИ”. Решить эту проблему всплывающего окна авторизации можно очень просто применив технологию jQuery.

В этом уроке я расскажу как поместить на страницу ссылку, которая вызывает появление небольшого окна с нужными формами авторизации на сайте. 

В результате должно получиться примерно как на картинке:

autoriz 1

demo      skachat

  1. Создайте страницу или выберите уже готовую, куда нужно вставить всплывающее окно авторизации, например такую:
    autoriz 2
  2. Вставляем в нужное место страницы ссылку и/или катинку для вызова окна авторизации. Например, так:
    autoriz 4
  3. Вставляем в HTML-коде ссылку, любую из нижеприведенных:

    a.

    b.

    с.

  4. В раздел body вставьте код всплывающего окна:
  5. Копируем 2 папки js и css со стилями библиотекой и плагинами в свою папку:
  6. Подключаем стиль и баблиотеки jQuery к странице. Для этого нужно вставить в рахдел head cnhjrb^
  7. Вставляем в раздел head  следующий скрипт:
  8. Сохраняем страницу и просматриваем работу вашей всплывающей формы авторизации.

 p.s. Если до этого на Вашей странице уже использовали какие-либо библиотеки jQuery, то внимательно смотрите на то, что за библиотки уже подключе и можно ли обойтись ими, не подключая новые из скачанного архива. В противном случае разные библиотеки между собой иногда конфликтуют, и какая из них “выживет” не известно.

Битрикс авторизации и регистрация в модальном (всплывающем) popup окне

В данном видео я показываю пример скрипта как сделать в Битрикс авторизацию и регистрацию пользователя на сайте в модальном окне.

<?
$showFooter = false;
if ($_REQUEST[‘ajax_mode’] == ‘Y’) {
require $_SERVER[“DOCUMENT_ROOT”].“/bitrix/modules/main/include/prolog_before.php”;
if ($USER->GetID()) {
$APPLICATION->IncludeComponent(“bitrix:system.auth.form”, “”, Array());
echo ‘<br>Вы авторизовались, обновление страницы…’;
echo ‘<script>setTimeout(function(){ location.reload(); }, 3000);</script>’;
} else {
$APPLICATION->AuthForm(, false, false);
}
die;
} elseif (!defined(“B_PROLOG_INCLUDED”) || B_PROLOG_INCLUDED!==true) {
require($_SERVER[“DOCUMENT_ROOT”].“/bitrix/header.php”);
$APPLICATION->SetTitle(“Авторизация”);
$showFooter = true;
}

CJSCore::Init([“popup”, “jquery”]);

// https://vhod-v-lichnyj-kabinet.ru/ru/sandbox/103916/ – Основа скрипта
// https://dev.1c-bitrix.ru/community/webdev/user/64008/blog/5942/ – BX.PopupWindow
// http://realty.vhod-v-lichnyj-kabinet.ru/bitrix/js/main/core/core_popup.js – BX.PopupWindowManager, onAfterPopupShow
// https://dev.1c-bitrix.ru/api_help/js_lib/ajax/bx_ajax.php – BX.ajax
// http://realty.vhod-v-lichnyj-kabinet.ru/bitrix/js/main/core/core_ajax.js – BX.ajax.prepareForm
// https://dev.1c-bitrix.ru/api_help/main/reference/cmain/authform.php – $APPLICATION->AuthForm
?>
<?if ($USER->IsAuthorized()):?>
<a href=”<?=$APPLICATION->GetCurPage()?>?logout=yes” rel=”nofollow”><b>Выход</b></a>
<?else:?>
<?$jsAuthVariable = BitrixMainSecurityRandom::getString(20)?>
<a href=”#” onclick=”<?=$jsAuthVariable?>.showPopup(‘/auth/’)rel=”nofollow”><b>Авторизация</b></a>
<script>
let <?=$jsAuthVariable?>= {
id: “modal_auth”,
popup: null,
/**
* 1. Обработка ссылок в форме модального окна для добавления в ссылку события onclick и выполнения
* перехода по ссылке через запрос новой формы через AJAX
* 2. Установка на форму обработчика onsubmit вместо стандартного перехода
*/
convertLinks: function() {
let links = $(“#” this.id ” a”);
links.each(function (i) {
$(this).attr(‘onclick’, <?=$jsAuthVariable?>.set(‘” $(this).attr(‘href’) “‘)”);
});
links.attr(‘href’, ‘#’);

let form = $(“#” this.id ” form”);
form.attr(‘onsubmit’, <?=$jsAuthVariable?>.submit(‘” form.attr(‘action’) “‘);return false;”);
},
/**
* Вывод модального окна с формой на странице при клике по ссылке
* @param url – url с параметрами для определения какую форму показать
*/
showPopup: function(url) {
let app = this;
this.popup = BX.PopupWindowManager.create(this.id, , {
closeIcon: true,
autoHide: true,
draggable: {
restrict: true
},
closeByEsc: true,
content: this.getForm(url),
overlay: {
backgroundColor: ‘black’,
opacity: ’20’
},
events: {
onPopupClose: function(PopupWindow) {
PopupWindow.destroy(); //удаление из DOM-дерева после закрытия
},
onAfterPopupShow: function (PopupWindow) {
app.convertLinks();
}
}
});

this.popup.show();
},
/**
* Получение формы при открытии модального окна или при переходе по ссылке
* @param url – url с параметрами для определения какую форму показать
* @returns string – html код формы
*/
getForm: function(url) {
let content = null;
url = (url.includes(“?”) ? ‘&’ : ‘?’) ‘ajax_mode=Y’;
BX.ajax({
url: url,
method: ‘GET’,
dataType: ‘html’,
async: false,
preparePost: false,
start: true,
processData: false, // Ошибка при переходе по ссылкам в форме
skipAuthCheck: true,
onsuccess: function(data) {
let html = BX.processHTML(data);
content = html.HTML;
},
onfailure: function(html, e) {
console.error(‘getForm onfailure html’, html, e, this);
}
});

return content;
},
/**
* Получение формы при переходе по ссылке и вывод её в модальном окне
* @param url – url с параметрами ссылки
*/
set: function(url) {
let form = this.getForm(url);
this.popup.setContent(form);
this.popup.adjustPosition();
this.convertLinks();
},
/**
* Отправка данных формы и получение новой формы в ответе
* @param url – url с параметрами ссылки
*/
submit: function(url) {
let app = this;
let form = document.querySelector(“#” this.id ” form”);
let data = BX.ajax.prepareForm(form).data;
data.ajax_mode = ‘Y’;

BX.ajax({
url: url,
data: data,
method: ‘POST’,
preparePost: true,
dataType: ‘html’,
async: false,
start: true,
processData: true,
skipAuthCheck: true,
onsuccess: function(data) {
let html = BX.processHTML(data);
app.popup.setContent(html.HTML);
app.convertLinks();
},
onfailure: function(html, e) {
console.error(‘getForm onfailure html’, html, e, this);
}
});
}
};
</script>
<?endif?>
<?if ($showFooter) require($_SERVER[“DOCUMENT_ROOT”].“/bitrix/footer.php”);?>

Вконтакте

Способы создания окон PopUp / Хабр

Добавление магии на jquery

Теперь добавим ссылки для скрытия/отображение нашего всплывающего окна.

Для этого необходимо подключить библиотеку JQuery и небольшой скрипт:

Постановка задачи(тз)


Необходимо создать поверх всего сайта всплывающее окно с затемнением экрана.

Результат

Теперь при загрузке страницы всплывающее окно PopUp скроется.

Если мы нажмем на ссылку «Show popup», у нас появится всплывающее окно. А если нажать на ссылку «Hide popup», то всплывающее окно вновь скроется.

Результат аналогичный


Благодаря свойству:

min-height:100%;

наш блок «затемнение» обрел ширину в 100% и

минимальную высоту

в 100% экрана.

Единственным минусом данного способа является то, что Internet Explorer поддерживает данное свойство только с версии 8.0.

Результат:

Способы создания окон PopUp / Хабр

Очень часто предлагают использовать:

position:absolute;

Да, результат получается аналогичный, но из-за того, что у нас задана высота блока «затемнения», появляются полосы прокрутки. Именно поэтому такой метод не подходит.

Способ 2

Этот способ не отличается кардинально от Способа 1, но я считаю его более удобным.

Похожее:  МТС — домашний интернет и телевидение в Балаково

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *