Установка: 

В таблицу стилей

/* Стили модального окна */ 
 .modal-header h2 { 
 color: #fff; 
 font-size: 20px; 
 font-weight: normal; 
 line-height: 1; 
 margin: 0; 
 } 
 /* кнопка закрытия окна */ 
 .modal .btn-close { 
 color: #aaa; 
 cursor: pointer; 
 font-size: 30px; 
 text-decoration: none; 
 position: absolute; 
 right: 5px; 
 top: 0; 
 } 
 .modal .btn-close:hover { 
 color: red; 
 } 
 /* слой затемнения */ 
 .modal-wrap:before { 
 content: ""; 
 display: none; 
 background: rgba(0, 0, 0, .3); 
 position: fixed; 
 top: 0; 
 left: 0; 
 right: 0; 
 bottom: 0; 
 z-index: 101; 
 } 
 .modal-overlay { 
 bottom: 0; 
 display: none; 
 left: 0; 
 position: fixed; 
 right: 0; 
 top: 0; 
 z-index: 102; 
 } 
 /* активация слоя затемнения и модального блока */ 
 .modal-open:checked ~ .modal-wrap:before, 
 .modal-open:checked ~ .modal-wrap .modal-overlay { 
 display: block; 
 } 
 .modal-open:checked ~ .modal-wrap .modal-dialog { 
 -webkit-transform: translate(-50%, 0); 
 -ms-transform: translate(-50%, 0); 
 -o-transform: translate(-50%, 0); 
 transform: translate(-50%, 0); 
 top: 20%; 
 } 
 /* элементы модального окна */ 
 .modal-dialog { 
 background: #264a69; 
 border: none; 
 border-radius: 3px; 
 position: fixed; 
 width: 80%; 
 max-width: 500px; 
 left: 50%; 
 top: -100%; 
 -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); 
 -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); 
 box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); 
 -webkit-transform: translate(-50%, -500%); 
 -ms-transform: translate(-50%, -500%); 
 -o-transform: translate(-50%, -500%); 
 transform: translate(-50%, -500%); 
 -webkit-transition: -webkit-transform 0.4s ease-out; 
 -moz-transition: -moz-transform 0.4s ease-out; 
 -o-transition: -o-transform 0.4s ease-out; 
 transition: transform 0.4s ease-out; 
 z-index: 103; 
 } 
 .modal-body { 
 padding: 20px; 
 } 
 .modal-body p { 
 margin: 0; 
 } 
 .modal-header, 
 .modal-footer { 
 padding: 20px 20px; 
 } 
 .modal-header { 
 border-bottom: #eaeaea solid 1px; 
 } 
 .modal-header h2 { 
 font-size: 20px; 
 margin: 0; 
 } 
 .modal-footer { 
 border-top: #eaeaea solid 1px; 
 text-align: right; 
 } 
 /* адаптивные картинки в модальном блоке */ 
 .modal-body img { 
 max-width: 100%; 
 height: auto; 
 } 
 /* кнопки */ 
 .btn { 
 background: #264a69; 
 border: #264a69 solid 1px; 
 border-radius: 3px; 
 cursor: pointer; 
 display: inline-block; 
 font-size: 14px; 
 padding: 8px 15px; 
 text-decoration: none; 
 text-align: center; 
 min-width: 60px; 
 position: relative; 
 } 
 .btn:hover, .btn:focus { 
 background: #1d293f; 
 } 
 .btn-primary { 
 background: #428bca; 
 border-color: #357ebd; 
 color: #fff; 
 } 
 .btn-primary:hover{ 
 background: #66A1D3; 
 }
 
 
input[type=text], input[type=password], textarea {
 display: inline-block;
 vertical-align: middle;
 padding: 13px 50px;
 font-size: 0.929em;
 background-color: #192936;
 border: 1px solid #fbfbfb;
 outline: none;
 box-shadow: inset 0 2px rgba(202, 51, 51, 0);
 -ms-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 border-radius: 5px;
}




HTML код окна вставляем в нижнюю часть сайта перед </body>: 


<div class="modal"> 
 <input class="modal-open" id="modal-1" type="checkbox" hidden> 
 <div class="modal-wrap" aria-hidden="true" role="dialog"> 
 <label class="modal-overlay" for="modal-1"></label> 
 <div class="modal-dialog"> 
 <div class="modal-header"> 
 <h2>форма обратной связи uCoz | для cssave</h2> 
 <label class="btn-close" for="modal-1" aria-hidden="true">х</label> 
 </div> 
 <div class="modal-body"> 
 <p> $MFORM_1$</p> 
 </div> 

 </div> 
 </div> 
 </div>


HTML

<label title="Стандартное модальное окно" class="btn" for="modal-1">Посмотреть пример модального окна</label>

Редактирование шаблона - формы связи - ставим данный код в шаблон

<table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2">
<tr><td width="35%">Имя отправителя <font color="red">*</font>:</td><td><input type="text" name="f4" size="30" style="width:95%;" maxlength="70"></td></tr>
<tr><td>E-mail отправителя <font color="red">*</font>:</td><td><input type="text" name="f1" size="30" style="width:95%;" maxlength="70"></td></tr>
<tr><td>Web-site:</td><td><input type="text" name="f5" size="30" style="width:95%;" maxlength="70"></td></tr>
<tr><td>Тема письма:</td><td><input type="text" name="f2" size="30" style="width:95%;" maxlength="70"></td></tr>
<tr><td valign="top">Текст сообщения <font color="red">*</font>:</td><td><textarea rows="7" name="f3" cols="30" style="width:95%;"></textarea></td></tr>
<tr><td>Оценка сайта:</td><td><select name="f6"><option>Отлично</option> <option>Хорошо</option> <option>Неплохо</option> <option>Плохо</option> <option>Ужасно</option></select></td></tr>
<tr><td>Код безопасности <font color="red">*</font>:</td><td><input type="text" name="f7" size="6" maxlength="5" style="text-align:center;"> $SECURITY_CODE$</td></tr>
<tr><td colspan="2" align="center"><br /><input type="submit" class="btn btn-primary" value="Отправить сообщение" style="background: #2fa0da;color: #fff;"></td></tr>
</table>