Модальное окно с фреймом,может кому пригодится
Здесь ничего сложного,стили ,скрипт и сам код окошка.

 <style>
    .modal-window {
        display: none;
        position: absolute;
        z-index: 100;
        background: #eee;
        padding: 5px;
        border-radius: 5px;
        box-shadow: 2px 2px 5px #000000;

        left: 30%;
        top: 30px;
    }
    .modal-window-close {
        position: absolute;
        font-size: 10px;
        cursor: pointer;
        right: 4px;
        top: 4px;
    }
    .modal-window-title {
        text-align: center;
    }
    .modal-window-content {
        padding: 5px;
    }
</style>
<script type="text/javascript">
    function showModal(self) {
        var modal = document.getElementById('modalWindow');
        var iframe = modal.getElementsByTagName('iframe')[0];
        iframe.src = self.href;
        modal.style.display = 'block';
        return false;
    }
</script>
<div id="modalWindow" class="modal-window">
    <div class="modal-window-close" onclick="this.parentNode.style.display='none';">Закрыть</div>
    <div class="modal-window-title">Я модальное окно)</div>
    <div class="modal-window-content">
        <iframe src="about:blank" frameborder="0"></iframe>
    </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis lorem ac dapibus ullamcorper. Pellentesque vestibulum felis eu odio bibendum, <a href="http://ngcmshak.ru/dialogi-overlay-i-lightbox/modalnoe-okno-s-freimom.html" onclick="return showModal(this);">ткни сюда</a>, ut viverra leo vestibulum. Sed a ipsum posuere, egestas mauris vel, porta magna. Mauris malesuada ipsum in lectus auctor, vel venenatis turpis facilisis. Mauris at eros libero. Curabitur eleifend lorem vel feugiat dignissim. Nam non molestie tortor.</p>
<p> Nullam arcu ligula, lacinia et diam ut, euismod congue metus. Nam erat enim, hendrerit at luctus in, vehicula quis turpis. Nulla id quam at nibh lacinia sollicitudin eget dictum massa. Donec ac arcu in dolor scelerisque tempor vel in justo. Sed elit orci, luctus vel magna a, dapibus ultricies nisl. Curabitur nunc lacus, ullamcorper nec libero at, fringilla luctus eros. Mauris faucibus eu risus id interdum. Duis ante quam, volutpat et tristique sed, tristique non nibh.</p>

Посмотреть можете скопировав код и вставив в панель для проверки скриптов, справа.

Вот небольшой скрипт, позволяющий пользователям самостоятельно выбирать фон сайта из предложенных Вами вариантов. В скрипте будет использован только библиотека jQuery и плагин jQuery Cookie — он поможет нам сохранить выбранный пользователем вариант. Таким образом даже после перезагрузки страницы или закрытия браузера, фон будет тот же, что выбрал пользователь.
И так, начнем…
1. Подключаем скрипты,первым делом подключаем саму библиотеку jQuery, если она у Вас еще не подключена, и плагин jQuery cookie.

 <script type="text/javascript" src="{tpl_url}/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/jquery.cookie.js"></script>

2. HTML разметка.

 <div id="panel-bg">
     <div>Выберите фон страницы:</div>
    <div class="button-bg bg-1" id="bg-1"></div>
    <div class="button-bg bg-2" id="bg-2"></div>
    <div class="button-bg bg-3" id="bg-3"></div>
    <div class="button-bg bg-4" id="bg-4"></div>
    <div class="button-bg bg-5" id="bg-5"></div>
    <div class="button-bg bg-6" id="bg-6"></div>
    <div class="button-bg bg-7" id="bg-7"></div>
 </div>

В блоке с id panel-bg находятся несколько блоков, которые будут в качестве кнопок. У каждого из них будет своя фоновая картинка, назначать мы их будем для классов. Также у этих блоков есть и id, которые должны совпадать с их классом (далее Вы поймете зачем).
3. CSS стили.

 .button-bg {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  float: left;
  margin: 7px 3px;
  cursor: pointer;
}
.active,
.button-bg:hover {
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
  border: 1px solid #fff;
}
.bg-1 {background: #fff url("images/agsquare.png");}
.bg-2 {background: #fff url("images/diagonales_decalees.png");}
.bg-3 {background: #fff url("images/geometry.png");}
.bg-4 {background: #fff url("images/gray_jean.png");}
.bg-5 {background: #fff url("images/ps_neutral.png");}
.bg-6 {background: #fff url("images/skelatal_weave.png");}
.bg-7 {background: #fff url("images/sneaker_mesh_fabric.png");}

Для каждого класса задали свою фоновую картинку и выровняли блоки в линию. Так же добавили стили при наведении и для активного блока.
4. Cкрипт.

 $(document).ready(function() {
 
  if($.cookie('body-bg')) {             // если кука уже есть
 
    var bgBody = $.cookie('body-bg');   // получаем значение куки
 
    $('body').addClass(bgBody);         // добавляем класс body
    $('#'+bgBody).addClass('active');   // выбираем активную кнопку и даем ей класс active
 
  }
 
  $('.button-bg').click(function() {    // действия при клике на кнопку (блок div)
 
    var bgBody = $('body').attr('class'), // получаем текущий класс и присваеваем его переменной bgBody
        bgId   = $(this).attr("id");      // получаем значение id, кнопки по которой был клик
 
    $('body').removeClass(bgBody).addClass(bgId); // удаляем текущий класс у body и добавляем тот который был выбран
 
    $('.button-bg').removeClass('active');        // удаляем у всех кнопок класс active
    $(this).addClass('active');                   // текущей кнопки даем класс active
 
    $.cookie('body-bg', bgId, {expires: 365});    // добавляем куку на год
 
  });
 
});

Как видите, скрипт достаточно маленький и простой. При клике по одному из блоков, значение его id записывается в куку, а тегу body дается класс (такой же как id блока по которому был клик), а самому блоку добавляется класс active. Так же в начале есть проверка на существование куки, и если она уже есть, то так же добавляются нужные классы и body и блоку в панели.
Все пользуемся.

PrettyPhoto — это простая галерея с огромными возможностями. Она поддерживает не только изображения, но и видео (в том числе с youtube и vimeo), flash, frame и AJAX. Эту галерею можно легко настроить под себя, внеся изменения в скрипт. В комплекте идут 6 тем оформления, которые позволяют легче подстроится под дизайн сайта.

1.Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам prettyphoto.zip (1.41 Mb)[/is-logged],распаковываем и заливаем в папку вашего шаблона.
2. Подключаем скрипты, первым делом jQuery, если он у Вас еще не подключен, а затем и скрипт PrettyPhoto.

Код:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="{tpl_url}/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

3. Подключим стили галереи

Код:

 <link rel="stylesheet" href="{tpl_url}/css/prettyPhoto.css" type="text/css" media="screen"   />

4.HTML разметка для галереи изображений

Код:

 <ul class="gallery clearfix">
    <li><a href="{tpl_url}/images/fullscreen/1.jpg" rel="prettyPhoto[gallery1]
 
" title="Описание снизу"><img src="{tpl_url}/images/thumbnails/t_1.jpg" width="60" height="60" alt="Название вверху" /></a></li>
    <li><a href="{tpl_url}/images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]
 
"><img src="{tpl_url}/images/thumbnails/t_2.jpg" width="60" height="60" alt="Название вверху" /></a></li>
    ...
</ul>

В теге rel ссылки мы указали в квадратных скобках, что это галерея 1 (для вывода одного изображения нужно оставить только prettyPhoto), в атрибуте title прописывается описание (выводится под изображением) и в атрибуте alt у изображения прописывается название (выводится над изображением).
Прописываем скрипт (желательно перед

Код:

 </body>

но можно и в head)

Код:

 <script type="text/javascript">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

Передаем параметры

Код:

 <script type="text/javascript">
    $(document).ready(function(){
        $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({
            animation_speed:'normal',//скорость анимации
            theme:'light_square',//тема оформления
            slideshow:3000,//время показа слайда
            autoplay_slideshow: true//автоматический старт слайдшоу
        });
    });
</script>

Описание всех параметров можно посмотреть в самом скрипте.
5. Разметка для вставки видео с youtube

Код:

 <a href="http://www.youtube.com/watch?v=kh29_SERH0Y?rel=0" rel="prettyPhoto" title="YouTube видео">Видео с YouTube</a>

Для вставки видео достаточно всего лишь прописать ссылку на страницу с видео.
6. Разметка для вывода содержимого какого-либо блока

Код:

 <a href="#block" rel="prettyPhoto" title="Контент">Контент из блока с id=block</a>

Данная галерея обладает еще множеством возможностей и различными настраиваемыми параметрами. Обо всем остальном Вы можете узнать из файлов демонстрации, а я же хотел бы обратить внимание на одну вещь…
В этой галереи меня не устроил вывод названия и описания, точнее то, откуда они берутся (title и alt). В атрибуты нельзя прописать теги, точнее можно, но не удобно. И для этого я кое-что изменял в скрипте на 154 и 155 строке. Первоначально они выглядели так:

Код:

 pp_titles = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('img').attr('alt')) ? $(n).find('img').attr('alt') : ""; }) : $.makeArray($(this).find('img').attr('alt'));
pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).attr('title')) ? $(n).attr('title') : ""; }) : $.makeArray($(this).attr('title'));

После изменения так:

Код:

 pp_titles = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('div.description').html()) ? $(n).find('div.description').html() : ""; }) : $.makeArray($(this).find('div.description').html());
pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('div.title').html()) ? $(n).find('div.title').html() : ""; }) : $.makeArray($(this).find('div.title').html());

И после этого вовнутрь ссылки добавил два блока div:

Код:

 <a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery1]">
    <img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Изображение 1" />
    <div class="title" style="display: none;">Название</div>
    <div class="description" style="display: none;">Описание</div>
</a>

Таким образом в описание легко можно добавлять и ссылки и параграфы и все остальное.
7. Кнопка поделиться от яндекс
Так как галерея изменяет url адрес и открывает контент в зависимости от адреса, то в ней есть возможность добавления кнопок от социальных сетей, что бы ставить лайки и делиться ссылкой. Изначально там есть кнопка twitter и facebook. И для того, что бы внедрить в нее кнопку от яндекса необходимо в самом скрипте заменить содержимое social_tools (строка 93), на то, что получите от яндекса.
8.вот и все подробнее в документации