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

[LADYX 91]

Всем здравствуйте! Прошу помощи!

Необходимо сделать простое модальное окно arcticModal (http://arcticlab.ru/arcticmodal/#examples), которое будет появляться при нажатии на ссылку.

Выполняю следующие действия:

Подключаю сам скрипт и стили:

<script src="arcticmodal/jquery.arcticmodal.js"></script>

<link rel="stylesheet" href="arcticmodal/jquery.arcticmodal.css">

<link rel="stylesheet" href="arcticmodal/themes/simple.css">

И вот на этом все. Может быть это все просто до безобразия, но дальше, хоть убейте, не могу понять, какая должна быть HTML-разметка и код JavaScript, который нужно будет вставить в шаблон сайта в main.tpl для вызова окна.

Всем огромное спасибо за помощь!

[alex32 942]

ТАк там же все разжевано

Вызов окна:

<span class="m-dotted" id="#example1" onclick="$('#exampleModal1').arcticmodal()">Простое модальное окно</span>

Само окно

<div class="g-hidden">

<div class="box-modal" id="exampleModal1">

<div class="box-modal_close arcticmodal-close">закрыть</div>

Пример простого модального окна

</div>

</div>

[LADYX 91]

да, если так и делаю, то оно у меня просто отображается на странице, как и весь остальной контент. А при нажатии на ссылку окно открывается, а со страницы исчезает. Окно закрываешь и оно снова появляется на странице.

Сделал так, добавил display: none;

<div style="display: none;">

<div class="g-hidden">

<div class="box-modal" id="exampleModal1">

<div class="box-modal_close arcticmodal-close">закрыть</div>

Пример простого модального окна

</div>

</div>

</div>

Теперь работает. Не могу понять, а почему так? Ведь и у них на сайте не заключено окно в <div style="display: none;"> и все работает.

[Mofsy 27]

да, если так и делаю, то оно у меня просто отображается на странице, как и весь остальной контент. А при нажатии на ссылку окно открывается, а со страницы исчезает. Окно закрываешь и оно снова появляется на странице.

Сделал так, добавил display: none;

<div style="display: none;">

<div class="g-hidden">

<div class="box-modal" id="exampleModal1">

<div class="box-modal_close arcticmodal-close">закрыть</div>

Пример простого модального окна

</div>

</div>

</div>

Теперь работает. Не могу понять, а почему так? Ведь и у них на сайте не заключено окно в <div style="display: none;"> и все работает.

Зачем использовать сторонние плагины, если в dle есть jquery ui?

[LADYX 91]

Зачем использовать сторонние плагины, если в dle есть jquery ui?

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

[alex32 942]

Теперь работает. Не могу понять, а почему так?Ведь и у них на сайте не заключено окно в <div style="display: none;"> и все работает.

потому что это сделанно по-правильному, через файл стилей main.css 22 строка

.g-hidden {

display: none;

}

[LADYX 91]

Согласен, только почему-то они это не указали в стилях, которые необходимо подключать:

<link rel="stylesheet" href="arcticmodal/jquery.arcticmodal.css">

<link rel="stylesheet" href="arcticmodal/themes/simple.css">

Вот и приходится догадываться. Ничего страшного, также вынес .g-hidden в файл стиля. Все работает.

alex32, огромное спасибо за помощь!