document.addEventListener('DOMContentLoaded', function() {
// Вешаем событие при нажатии на Show
var Show = document.getElementsByClassName('button-light');
[].forEach.call(Show, function(element, i) {
element.addEventListener('click', function(){
showMessageDialog(i);
});
});
// Вешаем событие при нажатии на Ok
var Close = document.getElementsByClassName('button-primary');
[].forEach.call(Close, function(element, i) {
element.addEventListener('click', function(){
closeMessageDialog(i);
});
});
});
function showMessageDialog(i){
var modal = document.getElementsByClassName('ui-message-box__wrapper')[i];
modal.style.display = "block";
}
function closeMessageDialog(i){
var modal = document.getElementsByClassName('ui-message-box__wrapper')[i];
modal.style.display = "none";
}
.ui-message-box__wrapper {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2002;
background-color: rgba(39,39,39,0.48);
}
.ui-message-box {
display: block;
position: fixed;
top: 50%;
left: 50%;
min-width: 400px;
transform: translateX(-50%);
padding: 12px 14px;
background-color: #edf2fc;
border: 1px solid #ebeef5;
border-radius: 8px;
z-index: 2000;
animation: fadeInDown 0.3s;
overflow: hidden;
}
.ui-message-box .button-close {
width: 22px;
height: 22px;
}
.ui-message-box__header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 8px;
margin-bottom: 8px;
}
.ui-message-box__content {
margin-bottom: 16px;
}
.ui-message-box__footer {
text-align: right;
cursor: pointer;
}
.message-box-title {
font-size: rem(24);
}
@-moz-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-o-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
<section class="message-box-doc">
<div class="container"><span class="ui-title-2">Standart Message-box:</span>
<div class="example-empty">
<div class="ui-message-box__wrapper" id="exampleModal">
<div class="ui-message-box">
<div class="ui-message-box__header"><span class="message-box-title">Title</span><span class="button-close" ></span></div>
<div class="ui-message-box__content"><span>Message is here</span></div>
<div class="ui-message-box__footer">
<div class="button button-primary">OK</div>
</div>
</div>
</div>
<div class="button button-light">Show</div>
</div>
</div>
</section>
<section class="message-box-doc">
<div class="container"><span class="ui-title-2">Standart Message-box:</span>
<div class="example-empty">
<div class="ui-message-box__wrapper" id="exampleModal2">
<div class="ui-message-box">
<div class="ui-message-box__header"><span class="message-box-title">Title2</span><span class="button-close" ></span></div>
<div class="ui-message-box__content"><span>Message is here2</span></div>
<div class="ui-message-box__footer">
<div class="button button-primary">OK</div>
</div>
</div>
</div>
<div class="button button-light">Show</div>
</div>
</div>
</section>