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

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

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

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

Итак, первый шаг у нас такой. Допустим у нас есть некий сайт, и вот есть у него какая-та страница и нам позарез надо ограничить доступ к ней. Для этого заходим в код этой страницы и пишем код всплывающего окна, вместе со стилями в самом начале нашей страницы. Обратите внимание мой метод действует только на статичные страницы, если Вы используете какие-то CMS то ищите соответствующие модули, либо подбивайте мое решение под себя.

<style type="text/css">
html {
	padding: 0;
	margin: 0;
}
.modalDialog {
 position: fixed;
 font-family: Arial, Helvetica, sans-serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: #000;
 z-index: 99999;
 display: block;
}
 
.modalDialog > div {
 width: 400px;
 position: relative;
 margin: 10% auto;
 padding: 5px 20px 13px 20px;
 border-radius: 10px;
 background: #fff;
 background: -moz-linear-gradient(#fff, #999);
 background: -webkit-linear-gradient(#fff, #999);
 background: -o-linear-gradient(#fff, #999);
}
.close {
	display: none;
}
</style>
<script type="text/javascript">
function my_proverka () {
var code = document.getElementById("my_pass").value;
var pass = "basww2mKKdnkKKsmmas";
if (code == pass) {
var win = document.getElementById("openModal");
win.classList.add("close");
}
}
</script>
<div id="openModal" class="modalDialog">
   <div>
      <h2>Введите пароль</h2>
<input type="password" id="my_pass" placeholder="Введите пароль сюда">
<input type="submit" onclick="my_proverka();" value="Войти">
   </div>
</div>

<div style="color: #000;">Здесь код нашего основного сайта - наш основной сайт</div>

Что делает данный код? Он покрывает все содержимое нашего сайта черной завесой и ждет, когда введут пароль в соответствующее поле. После ввода пароля, обратите внимание какой он у нас большой, идет проверка, на его соответствие с тем, который сидит в системе — и после этого производится заход на сайт, если все ок, а точнее не заход, а закрытие нашей ширмы. Вот такой вот легкий получился код у нас.

Предупреждение

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