Как сделать чтобы форма выводилась в отдельном всплывающем окне (модульном окне)... это вообще реаль? - ChronoForms

<div class="orde_f">
<a  class="btn" href = "javascript:void(0)" onclick = "document.getElementById('contact_form').style.display='block';document.getElementById('fade').style.display='block'">ПОЛУЧИТЬ БЕСПЛАТНУЮ КОНСУЛЬТАЦИЮ</a>
</div>

<div id="fade" class="black-overlay"></div>
<div  id="contact_form">
<div class="formcont">
   <a class="close-btn" href="javascript:void(0)" onclick = "document.getElementById('contact_form').style.display='none';document.getElementById('fade').style.display='none'">Закрыть</a>
{chronoforms5}demo-basic-contact{/chronoforms5}
</div>
</div>

.black-overlay, .black-overlay{
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	/* background-color: black; */
	background-color:#fff;
	z-index:1001;
	-moz-opacity: 0.7;
	opacity:.70;
	filter: alpha(opacity=70);
	
	
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

#contact_form .formcont{
display:block !important;
}
 #contact_form{
	float: left;
	position: fixed;
	top: 0%;
	left: 30%;
	z-index: 99999;
	/* -webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	border-radius:10px; */
	/* padding:30px; */
	display:none;
}


/* формируем кнопку закрытия */
.close-btn {
	width: 31px;
	height: 31px;
	display: block;
	/* cursor: pointer; *//* для случая применения отличных от <a> тегов */
	background: url(../images/close-button-3.png);
	background-size: 100%;
	/* background: #fff; */
	text-indent: -4999px;
	margin-top: -88px;
	margin-left: 320px;
	position: absolute;
}

<a class="modal" href="index.php?option=com_chronoforms5&amp;chronoform=название-формы&amp;tmpl=component" rel="{handler: 'iframe', size: {x: 760, y: 250}}">Заказать</a></p>