С небольшими красивостями
var on = 0; /* служебная переменная следящая за состоянием окна: 0 - значит окно закрыто ; 1 - открыто */
/* ниже описана функция которая собственно позволяет окну появится из небытия */
function loadPopup() {
if(on == 0) {
/* если переменная состояния окна равняется нулю, изменяем свойства DIV фона с именем back, а именно: задаем прозрачность opacity индексом 0.6 - данный индекс может принимать значения от 0.1 до 1 - чем больше цифра, тем меньше прозрачность, следовательно - темнее фон back */
$("#back").css("opacity", "0.6");
/* fadeIn - один стандартных визуальных эффектов, переводится как Из затемнения, блок popup появляется быстрее, активация темного фона back происходит медленнее */
$("#popup").fadeIn(500);
$("#back").fadeIn(1500);
/* служебная переменная переходит в состояние 1 - окно открыто */
on = 1;
}
/* функция открытия окна завершена */
}
/* функция закрытия окна и возвращения нормального цвета фона */
function off() {
if(on == 1) {
/* убираем окно-блок DIV с именем класса css "popup" с помощью эффекта Затемнение fadeOut */
$("#popup").fadeOut("normal");
/* возвращаем фону исходное состояние, дезактивируем затемненный фон back */
$("#back").fadeOut("normal");
/* не забываем про служебную переменную , возвращаем ей значение ноль */
on = 0;
}
/* функция закрытия окна завершена */
}
/* при клике на фоне HTML страницы, вне самого окна, окно закрывается */
$("div#back").click(function() {
off();
});
/* закрыть окно при клике на блоке с классом "close", здесь у нас будет расположен крестик */
$("div.close").click(function() {
off();
});
#popup {
/* само всплывающее окно , ширину и высоту Вы можете задать на свое усмотрение , но нет смысла задавать их слишком большими, иначе окно займет весь экран, кроме того следует обратить внимание на свойство margin-left отступ слева , чтобы окно находилось по центру экрана это свойство следует указывать из расчета ширина окна деленная на два плюс два пиксела , например для ширины окна 300px, margin-left будет равняться 152px */
display: none;
/*width: 700px;*/
height:250px;
z-index: 20;
position: fixed;
top: 25%;
left: 50%;
margin-left: -190px;
overflow-y:auto;
color: #000;
background-color: #fff;
border: 15px solid #ebeeee;
border-radius: 15px 15px 15px 15px;
box-shadow: 0 0 40px rgba(0, 0, 0, .3);
}
#back {
/* задний фон по умолчанию не виден, его цвет черный, он занимает всё пространство по высоте и ширине, его позиция фиксирована , то есть при скроллинге он никуда не денется */
display: none;
height:100%;
width:100%;
z-index:10;
position: fixed;
top:0px;
left:0px;
background:#000;
}
div.close {
/* блок с крестиком или ссылкой на закрытие окна */
position: absolute;
right: 8px;
top: 0px;
cursor: pointer;
color: red;
width:15px;
height:15px;
font-weight:bold;
}
<div id="popup">
<div>Ваш заказ принят.
<br />В ближайшее время с Вами свяжется наш специалист.
</div>
<div class="close">[X]</div>
</div>
<div id="back"></div>