Нажатие на кнопку “Вход”, поверх которой открывается форма

298

26 ноября 2016, 19:50

Приветствую! Необходимо создать страницу, где посередине была бы одна кнопка "Вход", нажав на которую ПОВЕРХ неё появилось бы окно, куда надо вводить "логин" и "пароль". Скажите, пожалуйста, каким образом сделать всплывающее окно для ввода данных при нажатии кнопки "ВХОД" ?

Answer 1

Используйте, например, basic auth:Описание на вики

Upd: поясню. Делаете статичную страничку, на ней кнопка ВХОД. По нажатию на кнопку - делаете переход на страницу в защищенной зоне.

Answer 2

Если вопрос про верстку всплывающего окна, то примерно так: html:

<div id="btn" onclick="showWindow()">Вход</div>
<div id="content_window">Тут форма</div>

css:

#btn{
 position:absolute;
 top: 50vh;
 left: 50vw;
 z-index:1;
}
#content_window{
 position:absolute;
 height:100vh;
 width:100vw;
 z-index:10;
 background:lightgrey;
 display:none;
}

js:

function showWindow(){
  var el = document.getElementById("content_window");
  el.style.display = 'block';
}

А если вопрос про создание работающей формы логина с клиентской и серверной частью, то он довольно широк и правильный ответ - ботать прогу, либо поискать готовое решение)