Модернизация модального окна от facebox

В данной статье хочу привести пример использования facebox, для организации вывода произвольного текста в модальном окне.

 

0. Если не подключен Jquery, то вставляем данный код

<script type="text/javascript" src="jquery.js"></script>

1. Подключим скрипт facebox и стиль для него.

<link rel="stylesheet" href="style.css" type="text/css"/>
<script type="text/javascript" src="facebox.js"></script>

2. Создадим скрипт

<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('a[rel*=facebox]').facebox({
      loading_image : 'loading.gif',
      close_image : 'closelabel.gif'
    }) 
  })
</script>

3. Создаем html код

<a href="#block1" rel="facebox">Открыть</a>
<div id="block1" style="display:none;">
  <b>Содержимое модального окна</b>
</div>

Пример: Открыть

Скачать

 

Изменения

В данном скрипте все хорошо, но меня не  устраивает что модальное окно фиксировано (ширина) и я это исправил для своих задач.

Реализация:

1. Изменения в style.css. Закомментирована строка "width: 370px;"

#facebox .body {
 padding: 10px;
 background: #fff;
    /*width: 370px;*/
}

2. Открываем facebox.js. Измененные строки смещены вправо.

reveal: function(data, klass) {
 $(document).trigger('beforeReveal.facebox')
 if (klass) $('#facebox .content').addClass(klass)
 $('#facebox .content').append(data)
 $('#facebox .loading').remove()
 $('#facebox .body').children().fadeIn('normal')
    $('#facebox').css('left', '15%'/*$(window).width() / 2 - ($('#facebox table').width() / 2)*/)
    $('#facebox').css('width', '70%')
 $(document).trigger('reveal.facebox').trigger('afterReveal.facebox')
 },

В принципе все, в отличии от стандартного примера у меня окно имеет резиновый размер 70% и располагается по середине. Скачать мой вариант можно здесь.



comments powered by Disqus

Популярное