Форма обратной связи во всплывающем окне - Joomla 3.x: Общие вопросы

	
<p><a href="#openModal" target="" class="btn btn-primary report-button">Название кнопки</a></p>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" class="right-position" title="Закрыть"><img src="images/system/close.png"></a></p>
<h2 style="text-align: center;">Заголовок</h2>
<p>&nbsp;</p>
<p>Текст вместо которого мы потом вставим форму обратной связи</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>

 /* Стили модального окна
----------------------------------------------------------------------------------------------------*/

.modalDialog {

	position: fixed;

	font-family: Arial, Helvetica, sans-serif;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	background: rgba(0, 0, 0, 0.47);

	z-index: 99999;

	opacity:0;

	-webkit-transition: opacity 400ms ease-in;

	-moz-transition: opacity 400ms ease-in;

	transition: opacity 400ms ease-in;

	pointer-events: none;

}

.modalDialog:target {

	opacity:1;

	pointer-events: auto;

}

.modalDialog > div {

	width: 500px;

	position: relative;

	margin: 2% auto;

	padding: 25px 50px 25px 50px;

	border-radius: 3px;

	background: #fff;

}

.close-dailog {

	padding-left: 50%;

	font-size: 20px;

	font-weight: bold;

	line-height: 20px;

	color: #000;

	text-shadow: 0 1px 0 #ffffff;

	opacity: 0.2;

}

.close-dialog-button {

	margin-left: 175px;

	color: #fff;

	background-color: #016da9;

	border: 1px solid #016da9;

	font-size: 16px;

	padding: 8px 40px;

	cursor: pointer;
}

.open-dialog-button {

vertical-align: 0;

color: #0070FF;

font-size: 13px;

display: inline-block;

}

.open-dialog-botton-blue {

	margin-top: 6px;

	color: #fff;

	background-color: #008CDA;

	border: 1px solid #008CDA;

	padding: 3px 9px;

	cursor: pointer;
}

.open-dialog-text-botton {
	color: #797979;
}

   
   
    /* Конец стилей модального окна
----------------------------------------------------------------------------------------------------*/

	<style>
/*Убираете данный код в файлы CSS*/
	.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		opacity:0;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		pointer-events: none;
	}

	.modalDialog:target {
		opacity:1;
		pointer-events: auto;
	}

	.modalDialog > div {
		width: 400px;
		position: relative;
		margin: 10% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}

	.close {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;

	}
/* Стили modalbutton сгенерированы в CSS3 button generatorЕ */
.modalbutton {background: #42d934;
  background-image: -webkit-linear-gradient(top, #42d934, #0c800f);
  background-image: -moz-linear-gradient(top, #42d934, #0c800f);
  background-image: -ms-linear-gradient(top, #42d934, #0c800f);
  background-image: -o-linear-gradient(top, #42d934, #0c800f);
  background-image: linear-gradient(to bottom, #42d934, #0c800f);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff !important;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;}

.modalbutton:hover {
  background: #3382c4;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

	.close:hover { background: #00d9ff; }
	</style>

В тексте материала:

<a class="modalbutton" href="#openModal">ЗАКАЗАТЬ</a>

<div id="openModal" class="modalDialog">
	<div>
		<a href="#close" title="Close" class="close">X</a>
		<h2>Сделайте заказ, заполнив поля ниже:</h2>
		<p>{QuickForm id=1}</p>
		
	</div>
</div>