Crewebik | Форум

Новые сообщения Участники Правила форума RSS Подписки Поиск

Страница 1 из 2
1
2
»

Модальное окно jQuery

exclusiv...

28.11.2011 в 21:32 Многие уже встречали такие окна на сайтах, но не знают как их реализовать. Данная инструкция поможет Вам сделать такое окно у себя на сайте...

DEMO

Для начала качаем архив с файлами и заливаем на сайт в одноимённые папки

Далее пишем такой код:

Code

<div id="box">
        <div id="dialog" class="window rad shadow">
         $GLOBAL_MODAL$
        </div>
    </div>
    <div id="mask"></div>
    <script language="javascript" src="/js/modal.js"></script>

и добавляем в шаблон сайта перед закрывающим тегом

Code

</body>

Далее в HEAD добавляем ссылку на стили для нашего окна:

Code

Далее создаём глобальный блок с названием MODAL и вставляем в него следующий код:

Code

<div id="title-modal">Заголовок
        <div id="close"><a href="#" class="close"><img src="/images/close.png" /></a></div>
    </div>
    <div align="center"> Здесь Ваш текст или код который Вы будете выводить в этом окне! </div>

Вместо слова "Заголовок" - пишем название Вашего окна (например "Профиль").
Вместо текста
Здесь Ваш текст или код который Вы будете выводить в этом окне!
вставляем нужный вам код (например код мини-профиля) и сохраняем.
Далее в нужном Вам месте сайта вставляем ссылку для открытия окна:

Code

<a href="#dialog" name="modal">Открыть окно</a>

Текст "Открыть окно" заменяем на свой и сохраняем.

Вот собственно и всё.

P.s. Размер окна регулируется в файле modal.css в строчках:

Quote

#box .window {
position:fixed;
left:0;
top:0;
width:300px;
height:200px;
display:none;
z-index:9999;
padding:0px;
}
#box #dialog {
background-color:#181818;
color: #CCC;
width:300px;
height:200px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

Автор lewonchik
Из всего изложенного может вот что получиться:

Иллидан

25.12.2011 в 19:42 Вопросы:
1) Что-то я не понял куда писать этот код

Quote (exclusive37)

<div id="box">
       <div id="dialog" class="window rad shadow">
        $GLOBAL_MODAL$
       </div>
   </div>
   <div id="mask"></div>
   <script language="javascript" src="/js/modal.js"></script>

Поподробнее пожалуйста.
2) Как создать глобальный блок?
3) Как подключить свою текстуру для фона?

exclusiv...

25.12.2011 в 21:06

Quote (Иллидан)

1) Что-то я не понял куда писать этот код

Перед

Code

</body>

2) Как создать глобальный блок?
В панели управления сайтом
3) Как подключить свою текстуру для фона?
Эм в css модального окна нужно смотреть)

Иллидан

25.12.2011 в 21:48 По первому пункту, я понял что перед код вставлять перед закрывающим тегом, вот только не понял эмм... в какой из "Блоков" в "Управлении дизайном"

exclusiv...

25.12.2011 в 22:05

Quote (Иллидан)

По первому пункту, я понял что перед код вставлять перед закрывающим тегом, вот только не понял эмм... в какой из "Блоков" в "Управлении дизайном"

Просто на странице ставишь перед закрывающим тегом /body вот этот код

Code

<div id="box">
         <div id="dialog" class="window rad shadow">
          $GLOBAL_MODAL$
         </div>
     </div>
     <div id="mask"></div>
     <script language="javascript" src="/js/modal.js"></script>

Иллидан

03.01.2012 в 11:45 Да штоб тебя!
Немогу всё никак создать это модальное окно!
Опишу порядок моих действий:
1) Зашёл "ПУ => Управление дизайном => Страницы сайта" и вставил

в самый конец перед закрывающим тегом /body.
2) Там же ("ПУ => Управление дизайном => Страницы сайта") в head добавил

3) Создал глобальный блок с названием MODAL (большими буквами) и вставляем в него нужный код.
4) Для открытия окна использовал такой код:

Code

В чём может быть ошибка или что я неправильно сделал?

exclusiv...

03.01.2012 в 11:58

Quote (Иллидан)

В чём может быть ошибка или что я неправильно сделал?

Надо еще вставить вот этот код на странице архива материалов и странице материала и комментов, и еще на форуме если захочешь:

Code

<div id="box">
          <div id="dialog" class="window rad shadow">
           $GLOBAL_MODAL$
          </div>
      </div>
      <div id="mask"></div>
      <script language="javascript" src="/js/modal.js"></script>

а еще и стили модального окна

Code

Иллидан

07.01.2012 в 10:51 А как можно создать ешё одно модальное окно с другим кодом и кнопку его вызова??

exclusiv...

07.01.2012 в 10:58

Quote (Иллидан)

оздать ешё одно модальное окно с другим кодом и кнопку его вызова??

эм хз.... я чет никогда над этим не задумывался shok

а для чего тебе второе окно если не секрет?

Иллидан

07.01.2012 в 11:04 Ну первое я использовал для прикольного отображения местоположения (посмотри у меня на сайте в мини-профиле кнопка "Личное"), а второе хочу попробовать сделать для входа на главной странице.

exclusiv...

07.01.2012 в 11:09

Quote (Иллидан)

второе хочу попробовать сделать для входа на главной странице.

не будет входить.... так будет конфликт скриптов....

Иллидан

07.01.2012 в 11:14 Жаль, я всё хочу попробовать сделать возможность входить с главной страницы...
А что если сделать, чтобы при нажатии на кнопку "Вход" открывалось новое окошко, а в нём форма входа?

exclusiv...

07.01.2012 в 14:35

Quote (Иллидан)

Жаль, я всё хочу попробовать сделать возможность входить с главной страницы... А что если сделать, чтобы при нажатии на кнопку "Вход" открывалось новое окошко, а в нём форма входа?

эта типа перейти на страницу входа, так она вроде есть /index/1 или 3 не помню

VedmaK

07.01.2012 в 17:58 Я думаю это возможно но трудно
сделать второе окно можно просто новым глобальным блоком ну и файлы залить по новой чтобы не конфликтовали

exclusiv...

07.01.2012 в 18:06

Quote (-=СК=-vedmak)

Я думаю это возможно но трудно сделать второе окно можно просто новым глобальным блоком ну и файлы залить по новой чтобы не конфликтовали

ну ты конечно умен biggrin

а ыт забыл какой ссылкой выводится модальное окно?
вот она:

Code

<a href="#dialog" name="modal">Открыть окно</a>

Модальное окно jQuery

Страница 1 из 2
1
2
»