Редирект сайта

Сегодня мне позвонил человек далекий от программирования и спросил: Как сделать, пока сайт в разработке, посетители перенаправлялись на другой домен?
Я уже делал такие вещи, когда один из моих сайтов менял домен. Чтобы не потерять индексированные поисковиками страницы и "не упасть" в рейтинге пришлось колдовать с файлом robots.txt и организовывать зеркало.
В принципе, сложного тут ничего нет.

1. В файле robots.txt задаем директиву Host (контент на сайтах должен быть идентичен) В поиске будет участвовать только главное зеркало:

User-Agent: *
Disallow:
Host: www.glavnoye-zerkalo.ru

2. Теперь нужно установить постоянный серверный редирект с HTTP-кодом 301 или редирект при помощи мета-тега refresh с нулевой задержкой, добавляемого в код каждой страницы (например: <meta http-equiv="refresh" content="0;URL='http://new-site.com/'"> ).

Дело в том, что выделяют несколько кодов перенаправления. Код 301 — это код постоянного перенаправления. А для временного нужны коды 302/303/307. 
Замечу, что для того, чтобы склеить зеркала, роботу, того же Яндекса, достаточно директивы Host в файлах robots.txt для всех зеркал. Редирект настраивать необязательно.
Но это в том случае, если вы организуете ПОСТОЯННЫЙ редирект.

В нашем же конкретном случае нужен ВРЕМЕННЫЙ редирект. Здест ситуация намного проще.
Для это можно использовать Meta-тэг refresh.
Например: <meta http-equiv="refresh" content="N;url=_адрес цели перенаправления_/">  — перенаправление (редирект) пользователя на страницу с адресом url, после N секунд нахождения на данной странице. 
При небольших значениях N (например 0) считается временным перенаправлением, аналогичным серверным редиректам с HTTP-кодом 302/303/307.
Ну вот и все.

Модальное окно с формой на CSS

Как всегда, все от моей врожденной лени, приходится искать готовые решения для той или иной задачи. В этот раз появилась необходимость добавить на сайт всплывающее окно с формой отправки данных, а конкретней - заказ звонка с сайта.

Перебороздив просторы глобальной сети, (уже не помню где, но все равно - спасибо, друг!) нашел подходящее и очень простое решение для модального окна на jQuery и CSS. Итак по порядку.

HTML разметка

В тело страницы, между тэгами body, вставляем структуру окна:

<div id="modal_form"><!-- Это и есть окно -->
      <span id="modal_close">X</span> <!-- Кнопка закрыть -->
      <!-- Тут содержание окна -->
</div>
<div id="overlay"></div><!-- Подложка -->

Сразу скажу, чтобы не было путаницы, данный модуль лучше вписать сразу после ссылки-вызова. Например в моем случае это простая текстовая ссылка "Заказать звонок", хотя можно было добавить и кнопку:

<p><a href="#" id="go">Заказать звонок</a></p>
<!-- Модальное окно -->
<div id="modal_form">
    <span id="modal_close">X</span>
        <form action="" method="post">
            <h3>Введите Ваши данные</h3>
            <p>Ваше имя<br />
                <input type="text" name="your-name" value="" size="40" />
            </p>
            <p>Ваш телефон<br />
                <input type="text" name="your-name" value="" size="40" />
            </p>
            <p style="text-align: center; padding-bottom: 10px;">
                <input type="submit" value="Отправить" />
            </p>
        </form>
</div>

Ну тут все просто и понятно. Внимание на модуль:

<div id="overlay"></div>

Роль этого div'а - cпасти нас от больших проблем в случае закрытия модального окна при клике не на крестик, а на любой другой элемент.

CSS

Этот текст лучше вставить в CSS-документ. Напомню, кто забыл или не знает, вызов CSS-документа делаем в хэде:
<link href="css/style.css" rel="stylesheet" type="text/css">

В данном случае стили важны не меньше, чем скрипты. Читайте коменты. Я оставил авторские, с незначительными исправлениями.
Сам текст выглядит так:

#modal_form {
    width: 300px;
    height: 250px; /* Размеры окна должны быть фиксированы */
    border-radius: 5px;
    border: 3px #000 solid;
    background: #fff; /* Цвет окна можно менять */
    position: fixed; /* чтобы окно было в видимой зоне в любом месте */
    top: 45%; /* отступаем сверху 45%, остальные 5% подвинет скрипт */
    left: 50%; /* половина экрана слева */
    margin-top: -150px;
    margin-left: -150px; /* тут вся магия центровки css, отступаем влево и вверх минус половину ширины и высоты

соответственно =) */
    display: none; /* в обычном состоянии окна не должно быть */
    opacity: 0; /* полностью прозрачно для анимирования */
    z-index: 5; /* окно должно быть наиболее большем слое */
    padding: 20px 10px;
}
/* Кнопка закрыть */
#modal_form #modal_close {
    width: 21px;
    height: 21px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    display: block;
}
/* Подложка */
#overlay {
    z-index: 3; /* подложка должна быть выше слоев элементов сайта, но ниже слоя модального окна */
    position: fixed; /* всегда перекрывает весь сайт */
    background-color: #000; /* черная */
    opacity: 0.8; /* но немного прозрачна. Меньшее значение увеличит прозрачность */
    width: 100%;
    height: 100%; /* размером во весь экран */
    top: 0;
    left: 0; /* сверху и слева 0, обязательные свойства! */
    cursor: pointer;
    display: none; /* в обычном состоянии её нет */
}

Скрипт

Сам скрипт можно вписать в самом конце перед </head> (коментарии авторские)

$(document).ready(function() { // вся магия после загрузки страницы
    $('a#go').click( function(event){ // ловим клик по ссылки с id="go"
        event.preventDefault(); // выключаем стандартную роль элемента
        $('#overlay').fadeIn(400, // сначала плавно показываем темную подложку
             function(){ // после выполнения предъидущей анимации
                $('#modal_form')
                    .css('display', 'block') // убираем у модального окна display: none;
                    .animate({opacity: 1, top: '50%'}, 200); // плавно прибавляем прозрачность

одновременно со съезжанием вниз
        });
    });
    /* Закрытие модального окна, тут делаем то же самое но в обратном порядке */
    $('#modal_close, #overlay').click( function(){ // ловим клик по крестику или подложке
        $('#modal_form')
            .animate({opacity: 0, top: '45%'}, 200,  // плавно меняем прозрачность на 0 и одновременно двигаем

окно вверх
                function(){ // после анимации
                    $(this).css('display', 'none'); // делаем ему display: none;
                    $('#overlay').fadeOut(400); // скрываем подложку
                }
            );
    });
});


Ну вот и все. Еще раз спасибо тебе, неизвестный друг.

Калькулятор CloudServer