rasimx
8/6/2017 - 7:39 PM
Модальные окна с arcticmodal
Модальные окна с arcticmodal
.arcticmodal-overlay,
.arcticmodal-container {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
.arcticmodal-container {
overflow: auto;
margin: 0;
padding: 0;
border: 0;
border-collapse: collapse;
}
*:first-child + html .arcticmodal-container {
height: 100%
}
.arcticmodal-container_i {
height: 100%;
margin: 0 auto;
@include max(650) {
width: 100%;
}
}
.arcticmodal-container_i2 {
padding: 24px;
margin: 0;
border: 0;
vertical-align: middle;
@include max(650) {
padding: 10px;
}
}
.arcticmodal-error {
padding: 20px;
border-radius: 10px;
background: #000;
color: #fff;
}
.arcticmodal-loading {
width: 80px;
height: 80px;
border-radius: 10px;
background: #000 url(loading.gif) no-repeat 50% 50%;
}
.modal {
width: 576px;
background-color: #f5f5f5;
opacity: 0.95;
position: relative;
padding: 15px;
@include max(650) {
width: 100%;
}
&:before {
display: block;
width: 32px;
height: 32px;
@include sprite;
position: absolute;
top: 15px;
left: 15px;
}
&.confirm, &.success, &.error {
padding: 15px 55px 15px;
.modal__head {
padding: 0;
}
@include max(650) {
padding: 15px 40px;
.modal__head .modal__cell {
padding: 0 10px;
}
}
}
&.confirm {
&:before {
content: '';
@include sprite(-111, -251);
background-position: -111px -251px;
}
}
&.success {
&:before {
content: '';
background-position: -180px -251px;
}
}
&.error {
&:before {
content: '';
background-position: -146px -251px;
}
}
&__close {
width: 24px;
height: 24px;
display: block;
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
opacity: .5;
&:before, &:after {
content: '';
width: 34px;
height: 3px;
background-color: #aaaaaa;
top: 50%;
left: 50%;
margin-top: -1px;
margin-left: -17px;
position: absolute;
border-radius: 4px;
transform: rotate(-45deg);
}
&:after {
transform: rotate(45deg);
}
&:hover {
opacity: 1;
}
}
&__wrap {
display: table;
height: 115px;
width: 100%;
}
&__row {
display: table-row;
}
&__head {
color: #333333;
font-size: 22px;
text-align: center;
@include max(430){
font-size: 20px;
}
.modal__cell {
padding: 0 30px;
}
}
&__content{
.modal__cell{
padding-top: 15px;
}
}
&__cell {
display: table-cell;
vertical-align: middle;
}
&__buttons {
.modal__cell {
text-align: center;
padding-top: 15px;
}
.btn {
height: 32px;
line-height: 32px;
font-size: 16px;
padding: 0 20px;
margin: 0 5px;
&.cancel {
color: #666666;
}
}
}
}.modal {
width: 576px;
background-color: #f5f5f5;
opacity: 0.95;
position: relative;
padding: 15px; }
@media only screen and (max-width: 650px) {
.modal {
width: 100%; } }
.modal:before {
display: block;
width: 32px;
height: 32px;
background-image: url("../img/sprite.png");
position: absolute;
top: 15px;
left: 15px; }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.modal:before {
background-image: url("../img/sprite@2x.png");
background-size: 500px 600px; } }
.modal.confirm, .modal.success, .modal.error {
padding: 15px 55px 15px; }
.modal.confirm .modal__head, .modal.success .modal__head, .modal.error .modal__head {
padding: 0; }
@media only screen and (max-width: 650px) {
.modal.confirm, .modal.success, .modal.error {
padding: 15px 40px; }
.modal.confirm .modal__head .modal__cell, .modal.success .modal__head .modal__cell, .modal.error .modal__head .modal__cell {
padding: 0 10px; } }
.modal.confirm:before {
content: '';
background-image: url("../img/sprite.png");
background-position: -111px -251px;
background-position: -111px -251px; }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.modal.confirm:before {
background-image: url("../img/sprite@2x.png");
background-size: 500px 600px; } }
.modal.success:before {
content: '';
background-position: -180px -251px; }
.modal.error:before {
content: '';
background-position: -146px -251px; }
.modal__close {
width: 24px;
height: 24px;
display: block;
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
opacity: .5; }
.modal__close:before, .modal__close:after {
content: '';
width: 34px;
height: 3px;
background-color: #aaaaaa;
top: 50%;
left: 50%;
margin-top: -1px;
margin-left: -17px;
position: absolute;
border-radius: 4px;
transform: rotate(-45deg); }
.modal__close:after {
transform: rotate(45deg); }
.modal__close:hover {
opacity: 1; }
.modal__wrap {
display: table;
height: 115px;
width: 100%; }
.modal__row {
display: table-row; }
.modal__head {
color: #333333;
font-size: 22px;
text-align: center; }
@media only screen and (max-width: 430px) {
.modal__head {
font-size: 20px; } }
.modal__head .modal__cell {
padding: 0 30px; }
.modal__content .modal__cell {
padding-top: 15px; }
.modal__cell {
display: table-cell;
vertical-align: middle; }
.modal__buttons .modal__cell {
text-align: center;
padding-top: 15px; }
.modal__buttons .btn {
height: 32px;
line-height: 32px;
font-size: 16px;
padding: 0 20px;
margin: 0 5px; }
.modal__buttons .btn.cancel {
color: #666666; }function notification(data) {
var $modal = $('#modal');
$modal.removeClass('error success confirm');
$modal.find('.modal__row').hide();
switch (data.type) {
case 'success' :
$modal.addClass('success');
break;
case 'confirm' :
var deffered = $.Deferred();
$modal.addClass('confirm');
$modal.find('.modal__buttons').show();
$modal.find('button.ok').on('click', function () {
deffered.resolve();
$modal.arcticmodal('close');
});
$modal.find('button.cancel').on('click', function () {
deffered.reject();
$modal.arcticmodal('close');
});
break;
case 'error' :
$modal.addClass('error');
break;
default :
break;
}
if (data.text && data.text.length > 0) {
var isHTML = RegExp.prototype.test.bind(/(<([^>]+)>)/i);
var text = data.text;
if(!isHTML(text)) text = text.replace(/[\r\n]+/g, '<br>');
$modal.find('.modal__content').show().find('.modal__cell').html(text);
}
if (data.subject && data.subject.length > 0) {
$modal.find('.modal__head').show().find('.modal__cell').html(data.subject);
}
$modal.arcticmodal();
if (data.type == 'confirm') return deffered.promise();
else return false;
}<div style="display: none;">
<div class="modal" id="modal">
<div class="modal__close arcticmodal-close"></div>
<div class="modal__wrap">
<div class="modal__row modal__head" style="display: none">
<div class="modal__cell"></div>
</div>
<div class="modal__row modal__content" style="display: none;">
<div class="modal__cell"></div>
</div>
<div class="modal__row modal__buttons" style="display: none;">
<div class="modal__cell">
<button class="ok btn btn_red" data-default-label="OK">{% trans "Да" %} </button>
<button class="cancel btn btn_gray" data-default-label="cancel">{% trans "Нет" %}</button>
</div>
</div>
</div>
</div>
</div>