shyxeroks,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
});
</script>
</head>
<body>
<div id="modal_form"><div id="modal_text_add"></div></div>
<div id="modal_overlay"></div>
<style>
/******************** Modal ******************/
#modal_form {
width: 500px;
border-radius: 5px;
border: 3px #000 solid;
background: #fff;
position: absolute;
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>
jQuery.fn.center = function()
{
var w = $(window);
this.css({"top":(w.height()-this.height())/2+w.scrollTop() + "px",
"left":(w.width()-this.width())/2+w.scrollLeft() + "px" });
return this;
}
function show_notice(text,color){
$('#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írtutis quasi germen efficitur.","#0000FF")
</script>
</body>
</html>