Модальное окно на JavaScript

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

Модальное окно на JavaScript

Разметка HTML


 <button id="open" onclick="show()">Открыть</button>
 <div id="cont">
 <div id="mdl">
 <span>Заголовок</span>
 <div id="description">
 <p>Содержание</p>
 <span>Любой текст</span>
 </div>
 <button class="close" onclick = 
 "document.getElementById('cont').style.display = 'none';
  document.getElementById('open').style.display =  'block';
  document.getElementById('none').style.display = 'block'";>
 Закрыть</button>
 </div>
 </div>
 <div id="none">
 <div class="txt_ex">Текст для проверки</div>
 </div>
 

Css


@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Oswald|Yanone+Kaffeesatz|Yeseva+One&  subset=cyrillic,cyrillic-ext,latin-ext,vietnamese');

 * {
    margin: 0;
    padding: 0;
    outline: none;
 }

 #cont {
    display: none;
    padding: 20% 0 0 30%;
 }
 #mdl {
    background-color: #c9cacc;
    width: 40%;
    height: 350px;
    color: black;
    position: fixed;
    text-align: center;
 }
 #mdl span {
    font-size: 2em;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    position: relative;
    top: 18%;
 }
 #description {
    font-size: 2em;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    position: relative;
    top: 28%;
    background-color: #bababa;
    height: 120px;
    border: 1px solid #a5a5a5;
 }
 #description span {
    line-height: 100px;
    font-size: 1em;
 }
 .close {
    position: absolute;
    bottom: 0%;
    right: 0%;
    cursor: pointer;
    float: right;
    text-decoration: none;
    text-align: center;
    padding: 1px 8px;
    font: 17px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #000;
    border: 1px solid #afafaf;
    cursor: pointer;
    background-color: #afafaf;
 }
 

JavaScript


 <script>
     
 function show() {
   var cont = document.getElementById("cont");
   var btn = document.getElementById("open");
   var none = document.getElementById("none");
 if (cont.style.display == "none") {
    cont.style.display = "block";
 } 
  else {
    cont.style.display = "none";
 }
  if (!btn.clicked && cont.style.display == "block") {
    btn.style.display = "none";
    none.style.display = "none";
     }
  }

</script>
 

В этом коде мы по клику сделали функцию открытия окно, и сделали что при открытии окна все остальное будет скрываться (все что находится в id none).