Хак дает возможность вывести любое Ajax окно в любом месте сайта.
Возможность: задать размер окна; название окна; любое количество окон (у каждого должен быть свой ID); любое содержание окна (все хтмл теги)

Так начнем с установки:
Скрипт вставляем в любом месте вашего сайта, рекомендую создать дополнительную страницу шаблона куда складать свои скрипты:

 <script type="text/javascript">
function Modalcom() {
$(function(){

    $('#Modalcom').dialog({
        autoOpen: true,
        show: 'fade',
        hide: 'fade',
        width: 700,
        height: 500,
    });

});
$('#Modalcom').show(3000);
$('.ui-dialog').show(3000);
}

</script>

width: 700 - ширина окна
height: 500 - высота окна
Modalcom - в нашем случаи ID окна

Где хотим видеть кнопку для активирования Ajax окна:

 <center><div class="showLinki">
<div class="quote">
<input type="submit" class="fbutton" onclick="Modalcom(); return false;"  value="Комментировать" style="width:200px;">
</div></div></center>

style="width:200px - ширина кнопки

вызов окна:

 <a href="#" onclick="FuncName(); return false;" value="Нажми на меню" class="bbcodes"></a>

Содержимое окна:

 <div id="Modalcom" title="Оставить комментарий" style="display:none; ">
ЗДЕСЬ содержимое окна
</div>

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

Разметка HTML
Разметка нашего всплывающего окошка чрезвычайно проста. Нам понадобятся всего лишь два элемента div с идентификаторами id, для привязки к javascript и формирования внешнего вида с помощью стилей CSS. Элемент div id="parent_popup" отвечает за позиционирование, цвет фона, прозрачность и степень его затемнения при запуске всплывающего окна. Внутри контейнера div id="popup" будет размещаться само содержание модального окна. Также нам нужно организовать ссылку для закрытия окна. Для наглядного примера разместим простой заголовок и парочку параграфов текстового содержания. В итоге мы получим полную разметку нашего окна примерно такого вида:

 <div id="parent_popup">
  <div id="popup">
<h1>«Всплывающее окно при загрузке сайта»</h1>
    <p>Это пример простого модального окна, всплывающего при загрузке сайта, с эффектом затемнения фона и возможностью управления временем появления.</p>
    <p>Его можно использовать с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма, форма регистрации или же форма обратной связи.</p>
<a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';"></a>
</div>
</div>

Для того чтобы окно появлялось не сразу при загрузке сайта, а с задержкой в несколько секунд, мы используем небольшой JS и уже с помощью его сможем регулировать время появления всплывающего окна. Все браузеры спокойно отнесутся к такому раскладу и не будут блокировать работу скрипта, а значит и само появление всплывающего окошка. Вставить этот JS лучше всего в конце тела страницы html перед закрывающим тегом /body. Ну а сам скрипт состоит всего лишь из нескольких строк:

 <script type="text/javascript">
	var delay_popup = 5000;
	setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
</script>

В примере время появления окна выставлено в 5000, что соответствует примерно 5 секундам, вы можете прописать любое другое значение.

Для закрытия окна мы просто используем ссылку с небольшим javascript в атрибуте и определенным классом class="close" для возможности оформления внешнего вида кнопки закрытия через стили CSS.

 <a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';"></a>

Таким образом мы подошли к самому интересному моменту (на мой взгляд) создания всплывающего окна, к формированию внешнего вида с помощью стилей и некоторых свойств CSS3.

Стили CSS
Для начала создадим стилевой идентификатор #parent_popup с помощью которого мы свяжем наше окно с javascript и сформируем внешний вид основного контейнера div id="parent_popup".

 #parent_popup {
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Для основы нашего окна выставляем фиксированное положение (position: fixed;), то есть, если вы будете прокручивать страницу при открытом окне, оно так же будет смещаться вниз. Зададим цвет фона черного цвета и добавим ему небольшую прозрачность с расширением на весь экран. За счет использования свойства z-index, фон будет располагаться поверх всех остальных элементов.
В завершении с помощью свойства display: none; скроем его до момента активации javascript.

Теперь давайте перейдем непосредственно к оформлению внешнего вида самого модального окна. Здесь все так же очень просто. Создаем связующий идентификатор #popup и уже в нем определяем все необходимые параметры нашего всплывающего окна. Задаем ширину модального окна и его положение на странице. Так же определяем цвет фона, устанавливаем стиль и цвет границы вокруг элемента, добавляем эффект тени и немного закругляем углы нашего информационного блока.

 #popup { 
  background: #fff;
  width: 520px;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border: 10px solid #ddd;
  position: relative;
  /*--CSS3 Тени для Блока--*/
  -webkit-box-shadow: 0px 0px 20px #000;
  -moz-box-shadow: 0px 0px 20px #000;
  box-shadow: 0px 0px 20px #000;
  /*--CSS3 Скругленные углы--*/
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
   border-radius: 15px;
}

С помощью свойств CSS3 можно практически как угодно сформировать внешний вид всплывающего окна, например использовать функцию линейного градиента для фона, или же различные виды трансформации. При этом правда не следует забывать, что не все браузеры одинаково хорошо справляются с обработкой новых свойств CSS3.

Закрываем окно
На завершающем этапе, необходимо реализовать функционал закрытия окна и сформировать внешний вид кнопки. Для этого создаем класс close и начинаем оформлять кнопку закрытия:

 .close {
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid #ccc;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: -24px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    top: -24px;
    width: 24px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
     box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background-color: rgba(0, 122, 200, 0.8);
}

Для кнопки закрытия мы установили цвет фона и степень его прозрачности. Определили положение, размер и насыщенность текста, добавили немного эффекта тени для текста. Затем определяем позицию кнопки, ширину и цвет рамки, а с помощью свойства скругления рамки делаем нашу кнопку круглой, и для большей выразительности добавим легкую тень. В завершении определяемся с изменением цвета фона при наведении курсора мыши на кнопку.

Все! Если вы сделаете все правильно, то получите в свое распоряжение всплывающее окно при загрузке сайта, с возможностью управления временем появления. Как вы воспользуетесь этой техникой исполнения, зависит только от вас. Но упаси вас бог, размещать в таких окнах разного рода «хрень» и уж тем более блокировать возможность закрытия окна.
Уважайте своих пользователей и они к вам потянутся.

Недавно Яндекс анонсировал новую платформу «Острова». Бета-версия Островов уже запущена в Поиске, Видео, Картинках и на главной странице Яндекса. Мы решили не отставать от коллег и делаем ещё один шаг на большом пути. Сегодня мы запускаем бета-версию новых Яндекс.Карт.

В Картах довольно сложный пользовательский интерфейс. Кнопочки, поля ввода, сама карта — попробуй-ка разберись во всём этом. Мы хотели сделать интерфейс проще и понятнее, сохранив при этом все функции сервиса. После множества наблюдений и экспериментов мы пришли к идее нового интерфейса и сегодня готовы показать вам его первую версию. Новые карты доступны по адресу http://beta.maps.yandex.ru.

Один из ключевых принципов Островов — релевантность интерфейса. Если вам не нужны никакие дополнительные функции, а нужна лишь карта — мы отдали ей столько места, сколько могли. Разве что оставили немного сверху для поисковой строки.

Чтобы вам было проще найти объект на карте, мы сделали результаты поиска более информативными — названия объектов показываются сразу, без клика. А форму каждой метки упростили.

Изменилось и поведение сервиса по клику на метку. Теперь информация об объектах появляется слева и не закрывает полезную область карты около метки.

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

Пока это лишь бета-версия, и мы реализовали в ней далеко не все функции сервиса — ещё нет маршрутов, панорам и фотографий. Всё это будет, но чуть позже. Что-то уже полным ходом в разработке, и некоторые функции мы запустим в ближайшее время; что-то пока в планах, и мы горячо обсуждаем, как это реализовать; а что-то ещё появится в планах после этого запуска.

Бета-версию новых Яндекс.Карт вы можете попробовать на компьютере, планшете и смартфоне.


Как вам наши новые карты?

Андрей Кармацкий, руководитель службы дизайна Яндекс.Карт

 <link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/jquery.ias.css" />
		<script type="text/javascript" src="{{ tpl_url }}/js/jquery-ias.js"></script>
		<script type="text/javascript">
        $(document).ready(function() {
            jQuery.ias({
                container : '#content-main',// Название контейнера в котором находятся новости 
                item: '.article',// Название контейнера самой новости
                pagination: '.pagination',// Ссылка на следующюю новость
                next: '.next-posts a',// Ссылка на следующюю новость
                loader: '<img src="{tpl_url}/images/loader.gif"/>',//Загрузчик, который появляется при подгрузке страниц
                triggerPageThreshold: 2, // Количество страниц, после которых прегратится автоматическая подгрузка и появится кнопка
trigger: 'Ещё' // Текст кнопки
            });
        });
    </script>
               

 [next-link]Вперед[/next-link]

 <span class="next-posts">[next-link]Вперед[/next-link]</span>