Обратный звонок

Вставляйте код в индексную страницу и присвойте display:none; а по клику display:block;

Здравствуйте!

Вы не посмотрите код?

Я вставляю в индексную страницу, у меня весь сайт отображается теперь в модальной форме.

Вот сама форма:

<div id="modal" class="modal">

<div>

<div class="text" align="center">

<div id="blok_tel">

<form action="" method="post" class="form1">

ЗАКАЗ ОБРАТНОГО ЗВОНКА

<input type="text" name="tel" class="inputbox" value="Номер телефона с кодом"

onfocus="(this.value == '0123456789') && (this.value = '')"

onblur="(this.value == '') && (this.value = '0123456789')">

<input type="submit" class="button" name="submit_tel">

</form>

<?if(isset($_POST["submit_tel"]))

{

$email = 'ваша_почта@yandex.com';

/* Отправляем email */

mail($email, "Заказ обратного звонка на сайте ...", "\n

Посетитель заказал обратный звонок! \n

Телефон : ".$_POST['tel']."

");

echo 'Заявка принята!';

}

?>

</div>

Вот css:

/* Контейнер */

.modal {

/* Слой перекрытия */

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

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

z-index: 10000;

/* Трансформации прозрачности при открытии */

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

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

transition: opacity 500ms ease-in;

/* Скрываем изначально */

opacity: 0;

pointer-events: none;

}

/* Показываем модальное окно */

.modal:target {

opacity: 1;

pointer-events: auto;

}

/* Содержание */

.modal > div {

width: 300px;

background: #ffffff;

position: relative;

margin: 10% auto;

/* По умолчанию минимизируем анимацию */

-webkit-animation: minimise 500ms linear;

/* Придаем хороший вид */

padding: 30px;

-moz-border-radius: 7px;

border-radius: 7px;

-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);

-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9);

box-shadow: 0 3px 20px rgba(0,0,0,0.9);

text-shadow: 0 1px 0 #fff;

}

/* Изменяем анимацию при открытии модального окна*/

.modal:target > div {

-webkit-animation-name: bounce;

}

.modal h2 {

font-size: 36px;

padding: 0 0 20px;

}

@-webkit-keyframes bounce {

0% {

-webkit-transform: scale3d(0.1,0.1,1);

-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);

}

55% {

-webkit-transform: scale3d(1.08,1.08,1);

-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);

}

75% {

-webkit-transform: scale3d(0.95,0.95,1);

-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);

}

100% {

-webkit-transform: scale3d(1,1,1);

-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);

}

}

@-webkit-keyframes minimise {

0% {

-webkit-transform: scale3d(1,1,1);

}

100% {

-webkit-transform: scale3d(0.1,0.1,1);

}

}

/* Ссылка на кнопку Закрыть */

.modal a[href="#close"] {

position: absolute;

right: 0;

top: 0;

color: transparent;

}

/* Сбрасываем изменения */

.modal a[href="#close"]:focus {

outline: none;

}

/* Создаем кнопку Закрыть */

.modal a[href="#close"]:after {

content: 'X';

display: block;

/* Позиционируем */

position: absolute;

right: -10px;

top: -10px;

width: 20px;

padding: 1px 1px 1px 2px;

/* Стили */

text-decoration: none;

text-shadow: none;

text-align: center;

font-weight: bold;

background: #000;

color: #ffffff;

border: 3px solid #ffffff;

-moz-border-radius: 20px;

border-radius: 20px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

box-shadow: 0 1px 3px rgba(0,0,0,0.5);

}

.modal a[href="#close"]:focus:after,

.modal a[href="#close"]:hover:after {

-webkit-transform: scale(1.1,1.1);

-moz-transform: scale(1.1,1.1);

}

.modal a[href="#close"]:focus:after {

outline: 0px solid #000;

}

/* Открываем модальное окно */

a.openModal {

}

a.openModal:hover,

a.openModal:focus {

}

.modal .modal_title {

display: block;

text-align: center;

font-size: 22pt;

}

У вас не хватало 2 закрытых тегов. Попробуйте этот код:

<div id="modal" class="modal">

<div>

<div class="text" align="center">

<div id="blok_tel">

<form action="" method="post" class="form1">

ЗАКАЗ ОБРАТНОГО ЗВОНКА

<input type="text" name="tel" class="inputbox" value="Номер телефона с кодом"

onfocus="(this.value == '0123456789') && (this.value = '')"

onblur="(this.value == '') && (this.value = '0123456789')">

<input type="submit" class="button" name="submit_tel">

</form>

<?if(isset($_POST["submit_tel"]))

{

$email = 'ваша_почта@yandex.com';

/* Отправляем email */

mail($email, "Заказ обратного звонка на сайте ...", "\n

Посетитель заказал обратный звонок! \n

Телефон : ".$_POST['tel']."

");

echo 'Заявка принята!';

}

?>

</div>

</div>

</div>

Спасибо. Работает. Но куда бы я не ставил форму - сайт "плывет". Необходимо править маргинами и падингами???

Можно в вверх форму через margin: -1000px и position:absolute;

☝

Спасибо за этот css трюк!