shyxeroks, функция закрытия
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
height: 2000px;
}
/******************** Modal ******************/
#modal_form {
width: 500px;
border-radius: 5px;
border: 3px #000 solid;
background: #fff;
position: fixed;
display: none;
opacity: 0;
z-index: 5;
padding: 5px;
border:3px solid #b88c27;
color:#b88c27;
top:0;
transition: all .8s linear;
}
#modal_form #modal_close {
background: #b88c27;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
cursor:pointer;
}
#modal_form #modal_close:hover {background: red;}
#modal_overlay {/*подложка */
z-index: 3;
position: fixed;
background-color: #000;
opacity: 0.8;
width: 100%;
height: 100%;
top: 0;
left: 0;
cursor: pointer;
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
jQuery.fn.center = function() {
var w = $(window);
this.css({
"top": (w.height() - this.height()) / 2 + "px",
"left": (w.width() - this.width()) / 2 + "px"
});
return this
};
function scrollWidth() {
var div = document.createElement("div");
div.style.overflowY = "scroll";
div.style.width = "50px";
div.style.height = "50px";
div.style.visibility = "hidden";
document.body.appendChild(div);
var width = div.offsetWidth - div.clientWidth;
document.body.removeChild(div);
return width
}
function show_notice(text, color) {
$("body,html").css({
"overflow": "hidden",
"padding-right": scrollWidth() + "px"
});
$("#modal_overlay").fadeIn(400, function() {
$("#modal_form").css({
"display": "block",
"border-color": color,
opacity: 1
});
$("#modal_text_add").html(text).css({
"color": color
});
$("#modal_form").center()
})
}
show_notice("Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit.<br> Sunt enim prima elementa naturae,<br> quibus auctis v\u00edrtutis quasi germen efficitur.", "#0000FF");
function show_notice_exit() {
$("#modal_form").css({
opacity: 0,
top: 0
});
$("#modal_overlay").fadeOut(400, function() {
$("body,html").css({
"overflow": "auto",
"padding-right": ""
});
$("#modal_form").css({
"display": "none"
});
})
}
window.setTimeout(show_notice_exit, 3E3);
window.setTimeout(function() {
show_notice("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fatebuntur Stoici haec omnia dicta esse praeclare, neque eam causam Zenoni desciscendi fuisse. Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; <i>Recte, inquit, intellegis.</i> </p>", "#FF0000")
}, 7E3);
window.setTimeout(show_notice_exit, 12E3);
});
</script>
</head>
<body>
<div id="modal_form"><div id="modal_text_add"></div></div>
<div id="modal_overlay"></div>
</body>
</html>