.jsmodal {
position: fixed; margin: auto;
top:0;left:0;right:0;bottom:0;
background: rgba(0,0,0,.8);
box-sizing: content-box;
visibility: hidden; opacity: 0;
transition: all .12s; z-index: 3000;
}
.jsmodal.visible {
visibility: visible; opacity: 1;
}
.jsmodal * {box-sizing: inherit}
.jsmodal .panel {
position: absolute; margin: auto;
top:-200px;left:0;right:0;bottom:0;
max-width: 600px; max-height: 70vh;
background: #f2f2f2; border-radius: 10px;
color: #000; padding: 50px 0;
transform: translateY(-25%);
transition: all .12s;
}
.jsmodal.nofooter .panel {
padding: 50px 0 0 0;
}
.jsmodal.visible .panel {
transform: none;
}
.jsmodal .title {
position: absolute; top: 0;
width: 100%; height: 50px;
line-height: 50px;
background: #178ecb;
font-weight: bolder; padding: 0 2em;
box-shadow: 2px 0 10px rgba(0,0,0,.6);
border-radius: 10px 10px 0 0;
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.jsmodal .panel .close {
position: absolute; top: .25em; right: .75em;
cursor: pointer; font-size: 25px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.jsmodal .panel .content {
text-transform: none;
text-align: center;
max-height: 100%;
font-family: verdana;
overflow: auto;
padding: 1em;
box-sizing: border-box;
font-size: 18px;
font-weight: normal;
line-height: 28px;
}
.jsmodal .panel .content iframe:only-child {
border: 0; width: 100%;
height: 100%; height: 80vh;
min-height: 200px;
}
.jsmodal .panel .content img:only-child {
width: 100%; max-width: 100%;
}
.jsmodal .panel .footer {
position: absolute; bottom: 0;
width: 100%; background: #178ecb;
font-weight: bolder; padding: 0 .5em;
box-shadow: 2px 0 10px rgba(0,0,0,.6);
border-radius: 0 0 10px 10px;
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
}
.jsmodal .panel .footer .action {
border-radius: 10px; color: #000;
background: #fff; border: 0;
min-width: 80px; min-height: 35px;
font-weight: bold; cursor: pointer;
margin: 10px;
transition: all .12s;
}
.jsmodal .panel .footer .action:hover {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
}