Модальне вікно - це "вікно" (блок елементів) яке відображається поверх основного вмісту веб-сторінки.
Зазвичай при відображенні модального вікна, основний вміст веб-сторінки є недоступний. Для цього додається прозорий елемент на всю ширину і висоту веб-сторінки.
- Створення модального вікна можна розділити на два способи:
- шаблоне
- динамічне
Шаблоний метод полягає у створенні HTML шаблону модального вікна, яке буде приховане за допомогою CSS властивостей display:none або visibility:hidden і в потрібний момент модальне вікно буде відображено.
Динамічний метод полягає у створені елементів модального вікна за допомогою методів JavaScript document.createElement() і додавання до веб-сторінки.
При відображенні/скривані модульного вікна можна використовувати CSS анімацію.
Шаблоний метод
Описуємо для шаблоного мадального вікна HTML, стилі CSS та JavaScript для показу/скривання модального вікна.
Приклад шаблоного модального вікна:
<div id="modal">
<div id="modal_backgroung"></div>
<div id="modal_window">
<div id="modal_close">✖</div>
<div id="modal_title">Модальне шаблоне вікно</div>
<div id="modal_text">Привіт JavaScript :-)</div>
</div>
</div>
<button onclick="modalShow()">показати модальне вікно</button>
#modal{
display: none;
}
#modal_backgroung{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #000000;
opacity: 0.8;
z-index: 90;
}
#modal_window{
position: fixed;
padding: 5px;
background: #ffffff;
width: 90%;
max-width: 100%;
min-height: 150px;
transform: translate(-50%, -50%);
top:50%;
left: 50%;
opacity: 1;
z-index: 99;
}
#modal_close{
position: absolute;
top:-2px;
right: -3px;
width: 25px;
height: 25px;
color: red;
text-align: center;
cursor: pointer;
outline: none;
}
#modal_title{
text-align: center;
font-weight: bold;
}
#modal_text{
font: 14px Arial;
}
function modalShow(){
modal.style.display='block';
}
function modalClose(){
modal.style.display='none';
}
modal_backgroung.onclick=modal_close.onclick=modalClose;
Приклад #2 шаблоного мадального вікна.
<div id="md">
<div id="md_bg" onclick="mdClose();"></div>
<div id="md_dialog">
<div id="md_text">Приклад модального вікна.</div>
<a id="md_close" title="Закрити" onclick="mdClose();">✕</a>
</div>
</div>
<button onclick="mdShow()">показати</button>
#md{
visibility: hidden;
}
#md_bg{
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 90;
background-color: #000000;
opacity: 0.35;
position: fixed;
}
#md_dialog{
top:50%;
left: 50%;
font-size: 14px;
font-family: 'Tahoma', Arial, sans-serif;
z-index: 100;
width: 90%;
max-width: 950px;
position: fixed;
padding: 10px;
border: 1px solid #383838;
border-radius: 4px;
background-color: #FFFFFF;
box-shadow: 5px 5px 12px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
transform: translate(-50%, 0);
}
#md_close{
position: absolute;
padding: 0;
top: -10px;
right: -5px;
width: 22px;
height: 22px;
border: 2px solid #cccccc;
border-radius: 50%;
background-color: rgba(61, 61, 61, 0.8);
box-shadow: 0px 0px 10px #000;
text-align: center;
text-decoration: none;
font-size: 12px;
font-weight: bold;
line-height: 22px;
}
#md_close:hover{
background-color: rgba(252, 20, 0, 0.8);
}
function mdShow(){
md.style.visibility='visible';
}
function mdClose(){
md.style.visibility='hidden';
}
//зміна значення за допомогою JS
//md_text.innerText='Текст';
Динамічне створення модального вікна за допомогою JavaScript.
Клас modalWindow описує об'єкт який створює елементи для модального вікна.
При виклику конструктора можна задати текст модального вікна. Також текст можна вказати за допомогою властивості innerText, а HTML за допомогою innerHTML.
class modalWindow{
#modal=document.createElement('div');
#modal_parent=document.createElement('div');
#modal_block=document.createElement('div');
#modal_close=document.createElement('div');
#modal_body=document.createElement('div');
constructor(text){
this.#modal.appendChild(this.#modal_parent);
this.#modal.appendChild(this.#modal_block);
this.#modal_block.appendChild(this.#modal_close);
this.#modal_block.appendChild(this.#modal_body);
this.#modal_parent.onclick=this.#modal_close.onclick=this.close.bind(this);
this.#modal_parent.style='position:fixed;top:0;left:0;with:100%;height:100%;min-height:'+document.documentElement.scrollWidth+'px;min-width:'+document.documentElement.scrollWidth+'px;opacity:0.55;background-color:black;z-index:90;';
this.#modal_close.innerHTML='✖';
this.#modal_close.style='padding:0;position:absolute;width: 20px;height:20px;top:-7px;right:1px;cursor:pointer;font-size:15px;line-height:0;font:20px Arial;text-align:center;text-shadow: 0px 0px 4px black;';
this.#modal_block.style='width:96%;max-width:650px;min-height:50px;position: fixed;top:50%;left:50%;transform: translate(-50%, -50%);background-color:white;box-shadow: 0px 0px 12px 0px black;z-index:99;';
this.#modal_body.style='padding:2%;overflow-y:auto;';
if(text)this.#modal_body.innerText=text;
}
get innerText(){
return this.#modal_body.innerText;
}
set innerText(value){
this.#modal_body.innerText=value;
}
get innerHTML(){
return this.#modal_body.innerHTML;
}
set innerHTML(value){
this.#modal_body.innerHTML=value;
}
show(){
document.body.appendChild(this.#modal);
//анімація
this.#modal_block.animate([{opacity:0},
{opacity:1}],500);
}
close(){
document.body.removeChild(this.#modal);
}
}
var m=new modalWindow('Привіт :-)');
m.show();