модальное окно на чистом javascript

Модальное окно на чистом JavaScript. Простое модальное овно для сайта

В данной записи я вам покажу как сделать модальное окно на чистом JavaScript. Модальное окно будет открываться после нажатия на кнопку.

HTML

HTML простой – кнопочка и контейнер для модального окна.

<button id="btn_modal_window">Open Modal</button>
  <div id="my_modal" class="modal">
    <div class="modal_content">
      <span class="close_modal_window">×</span>
      <p>Модальное окно!</p>
    </div>
  </div>

CSS

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    z-index: 1000;
}
.modal .modal_content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    z-index: 99999;
}
.modal .modal_content .close_modal_window {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

JavaScript

 var modal = document.getElementById("my_modal");
 var btn = document.getElementById("btn_modal_window");
 var span = document.getElementsByClassName("close_modal_window")[0];

 btn.onclick = function () {
    modal.style.display = "block";
 }

 span.onclick = function () {
    modal.style.display = "none";
 }

 window.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

9
Оставить комментарий

avatar
9 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
8 Авторы комментариев
Nikolai5589treantincabakarounsentyImmof Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
sam
Гость
sam

У вас тут опечаток ппц сколько! Это что за дела? Наймите редактора хорошего.

Модальное окно на чистом JavaScript. Простое модальное ОВНО для сайта…

Эта форма комментариев находится ПО защитой антиспам…

Виктор
Гость
Виктор

Не работает

JanleF
Гость

Cheapest 5mg Cialis [url=https://apcialisle.com/#]buy cialis online in usa[/url] Cialis 5mg Forum buy cialis online overnight shipping Cialis Para Hipertensos

JanleF
Гость

buy accutane ireland [url=https://buycialisuss.com/#]Buy Cialis[/url] Sipreme Suppliers Mumbai India Cialis Cheap Doxycycline Online

Immof
Гость
Immof

http://reyna.userbet.xyz
Высокотехнологичные инструменты для заработка на криптовалютных активах

[url=https://voronezh.podarki-market.ru/catalog/product-145139/?MID=924&result=reply#message924]Высокотехнологичные инструменты для заработка на криптовалютных активах[/url] [url=https://volgograd.podarki-market.ru/catalog/product-228048/?MID=1464&result=reply#message1464]Высокотехнологичные инструменты для заработка на криптовалютных активах[/url] [url=https://pitanie-sport.by/blog/kak-kupit-protein-v-minske-po-horoshej-tsene#comment_5397]Высокотехнологичные инструменты для заработка на криптовалютных активах[/url] f16ec2f

unsenty
Гость

Vente De Cialis En France [url=https://buycialisuss.com/]cialis online cheap[/url] cialis en algerie cheap cialis online Achat Cialis Forum

abakaro
Гость

Keflex Mayo [url=https://buycialisuss.com/]buy cialis online safely[/url] Viagra Farmacia Italiana Cialis Cytotec Online Pharmacies

treantinc
Гость
treantinc

Cialis Farmaco E Cura [url=https://agenericcialise.com/]viagra cialis online[/url] Propecia Medical Results buy cialis without presc Levitra Ersatz

Nikolai5589
Гость

Доброго времени суток
Транспортно-экспедиторская компания Азия Трейдинг предоставляет услуги по перевозке контейнерных и сборных грузов из КНР в минимальные сроки с таможенным оформлением в морских портах Приморского края.
Если у Вас планируется актуальная поставка груза из Азии, просим прислать запрос и мы подготовим для Вас предложение.
offer(at)msc.com.ru