JSFiddle - React, Tailwind, and code Playground
HTML
<div class="overlay"></div>
<a data-getModal=".mypopup">Кликни кликни</a>
<div class="mypopup popup"></div>
CSS
.overlay {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
cursor: default;
left: 0;
display: none;
position: fixed;
right: 0;
top: 0;
opacity: 0;
z-index: 99999;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.popup {
background-color: #fff;
border: 3px solid #fff;
display: none;
left: 50%;
opacity: 0;
padding: 15px;
width: 250px;
height: 200px;
position: fixed;
text-align: justify;
top: 40%;
z-index: 999999;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
border-radius: 11px;
}
.close_order {
font-size: 13px;
display: block;
width: 6px;
height: 17px;
position: absolute;
padding: 1px 9px 4px 9px;
top: -15px;
right: -15px;
cursor: pointer;
color: #fff;
font-family: 'tahoma', sans-serif;
background: -webkit-gradient(linear, left top, right top, from(#b1c200), to(#808800));
background: -webkit-linear-gradient(top, #b1c200, #808800);
background: -moz-linear-gradient(top, #b1c200, #808800);
background: -o-linear-gradient(top, #b1c200, #808800);
background: -ms-linear-gradient(top, #b1c200, #808800);
background: linear-gradient(top, #b1c200, #808800);
background-color: #b1c200;
border: 1px solid #00880d;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
text-align: center;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.5);
}
.popup .close_order:hover {
background: -webkit-gradient(linear, left top, right top, from(#808800), to(#808800));
background: -webkit-linear-gradient(top,...
JavaScript
$.fn.miniModal = function(opt){
var tmp = {
type : "fade",
pause : 500,
overlay : ".overlay",
overlay_click : false
},
me = $(this),
api = {
fade : function(modal,type){
if(type){
modal.css({'opacity':'1'});
$(tmp.overlay).css({'opacity':'1'});
}else{
modal.css({'opacity':'0'});
$(tmp.overlay).css({'opacity':'0'});
}
},
toDown : function(modal,type){
// modal - это нужное модальное окно, type - определяет открываем (1) или закрываем (0) -
}
}
if(typeof opt == "object") tmp = $.extend(tmp,opt);
//Проверяем, если метода не существует, устанавливаем fade
if(typeof api[tmp.type] != "function"){
tmp.type = "fade"
}
//Если нет, то создаем кнопку закрытия
if(me.children(".close_order").length == 0)
me.prepend('<div class="close_order">X</div>');
//Сборка селектора для закрытия. Проверим установлен ли overlay_click
$closeSelector = '.popup .close_order';
if(tmp.overlay_click){
$closeSelector = tmp.overlay + " , " + $closeSelector;
}
//Закрытие
$(document).on("click",$closeSelector,function (){
$modal = $(".popup:visible"); //Берем только открытое окно
api[tmp.type]($($modal),0); //true открываем, false закрываем
setTimeout(function(){
//Скрываем элемент после паузы
$modal.hide();
$(tmp.overlay).hide()
},tmp.pause)
});
//Открытие
$(document).on("click",'[data-getModal]',function (e){
$modal = $(this).attr("data-getModal");
if(!$modal || $($modal).length == 0) return false;
$($modal + "," + tmp.overlay).show(0,function(){
api[tmp.type]($($modal),1); //true открываем, false закрываем
});
e.preventDefault();
});
}
//Запускаем
$(document).ready(function(){
$(".mypopup").miniModal({
type...