Как в dle сделать всплывающее окно
Добавил пользователь Alex Обновлено: 18.09.2024
Как вы все знаете начиная с версии DLE 10.5, появился шаблон для вывода ссылки на скачивания attachment.tpl,.При помощи его, вы можете оформить вывод ссылки как вам угодно!
В моем случаи, будем выводит в модальном окне! Данный способ самый простой, далее вы можете его дополнять!
Войдите на сайт
Все собранные средства будут переданы автору этой статьи - SX2
Сумма перевода от 1 доллар
Откройте свой attachment.tpl и замените все содержимое, на:
Как вывести прямые ссылки если вы используете доп.поля?
Открыть fullstory.tpl в нужно месте вставить:
Где files имя доп.поля.
Добавлен мануал, как вывести прямые ссылки с доп.полей в модальном окне с таймером и вставкой рекламы!
Хак. Делаем модальные окна DLE адаптивными
Для того чтобы наши модальные окна DLE стали адаптивными на всего лишь нужно вписать такой CSS:
Вуоля! Наши модальные окна теперь адаптируются под все разрешения ;)
Не забываем обновить страницу CTRL+F5
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию. Это займёт не более минуты. Не волнуйтесь, мы не спамим!
Вы находитесь на странице скачивания файла. Кнопка загрузки внизу страницы. Если нет кнопки , значит нет файла. Нет файла - просьба сообщить администартору удобным способом. Спасибо большое за понимание!
Реклама - это вынужденная мера для поддержания проекта на плаву. Я не принуждаю Вас кликать по рекламным блокам. Если конечно она вас не заинтересовала.
Да и самое важное, все материалы носят чисто ознакомительный характер, всё файлы взяты из открытых источников, соответсвенно Вы их используете на свой страх и риск.
iGroot 4
Off iGroot
Окошко глючное, вылезает при каждой перезагрузке форума.
vir2oz 1
Off vir2oz
Окошко глючное, вылезает при каждой перезагрузке форума.
userpuser 0
Off userpuser
И вот в таком формате приходят уведомления с Вашего сайта!
----==_mimepart_0c3f9fe849b2b5042d508536908d43fb
Content-Type: text/plain; charset=UTF-8
-- Форум поддержки DataLife Engine
Форум поддержки DataLife Engine
----==_mimepart_0c3f9fe849b2b5042d508536908d43fb
Content-Type: text/html; charset=UTF-8
Мне надо чтобы при появлении всплывающего окна сайт, находящейся за окном был затемнен и элементы сайта были недоступны, как это сделать?
Как сделать всплывающее окно?
как сделать всплывающее окно? через jquery ui dialog
Как сделать всплывающее окно?
Имею желание сделать следующее.Кнопка - Всплывает окно с <asp:Calendar> . Выбрал Дату - return.
Как сделать всплывающее окно?
подскажите как сделать всплывающее окно: допустим нажимаем на Тему 1(lable1) и появляется окно типа.
Как сделать всплывающее окно
Понравилась кнопка всплывающая на одном сайте, через файр бег скопировал код кнопки, но на моем.
Как сделать всплывающее окно на рабочий стол?
Я создал программу для курсовой работы ! Курсавая на тему Крылатые фразы , так вот я хочу чтобы на.
Как сделать всплывающее окно для dataGridView?
В TextBox вводится слово, ищется в Access. Строка с этим словом выводится в dataGridView.
Как сделать всплывающее окно с возможностью закрытия?
у меня сайт некорректно отображается в IE8, если нажать "представление совместимости" то все встает.
При этом показ окна обычно сопровождают затемнением всей другой части страницы. Это действие позволяет визуально отделить его от остального содержимого страницы, а также показать, что в данный момент только оно одно является активным элементом. При этом контент, расположенный под ним, делают недоступным (т.е. пользователь не сможет с ним взаимодействовать пока он не закроет это окно).
Вызов модального окна можно привязать к различным событиям на странице, но в большинстве сценариев это осуществляют при нажатии на кнопку или ссылку.
Изображение модального окна:
Оно состоит из заголовка (хедера), основной части и футера.
В заголовке обычно выводят название окна и элемент, с помощью которого его можно закрыть. В основной части распологают содержимое, а в футере кнопки для выполнения различных действий.
Загрузка и установка модального окна
Проект модального окна расположен на GitHub. Перейти к нему можно по этой ссылке.
Процесс установки модального окна на страницу выполняется посредством подключения к ней его CSS и JavaScript файлов, или добавления их содержимого в соответствующие свои файлы.
Как создать и вызвать модальное окно
Эта реализация модального окна не требует непосредственного размещения его HTML кода на странице . Это выполняется программно.
Таким образом, для того чтобы создать его достаточно просто вызвать функцию $modal :
При создании окна вы можете сразу же его настроить, для этого в данную функцию необходимо передать данные в формате объекта. Осуществляется это с помощью соответствующих ключей (свойств). Например, с помощью ключа title вы можете задать заголовок, который будет иметь всплывающее окно по умолчанию. Ключ content позволяет установить содержимое, а footerButtons – кнопки для отображения их в его нижней части (футере).
Ключ footerButtons в отличие от title и content принимает в качестве значения массив объектов . Каждый объект в этом массиве представляет собой кнопку . Она задаётся с помощью ключей text , class , handler . С помощью них вы можете установить кнопке (элементу ) текст, значение атрибутов class и data-handler . Если ключ footerButtons вообще не указать, то в этом случае модальное окно будет создано без футера.
Пример создания модального окна с настройками по умолчанию:
Но функция $modal не только создаёт модальное окно в DOM, но также предоставляет методы для управления им.
Для этого нужно создать переменную и присвоить ей результат выполнения функции $modal .
В эту созданную переменную будет помещён объект (а точнее ссылка на него), имеющий следующие методы:
- show – для отображения модального окна;
- hide – для скрытия модального окна;
- destroy – для удаления модального окна из DOM и связанных с ним обработчиков событий;
- setContent – для установки контента;
- setTitle – для установки заголовка.
Эти методы предназначены для взаимодействия с созданным окном. Они позволяют его открыть, закрыть, изменить ему контент и др.
Рассмотрим, как работать с этими методами на примерах.
Например, метод show используется когда вам необходимо показать (открыть) модальное окно:
Метод hide применяется для его скрытия:
Методы setContent и setTitle предназначены соответственно для изменения контента и заголовка модального окна после его создания.
В возвращаемом объекте также есть метод destroy . Его необходимо использовать только когда вам необходимо полностью удалить модальное окно из DOM, а также связанные с ним события:
Данную операцию имеет смысл использовать только в том случае, если созданное модальное окно вам больше не нужно на странице.
Примеры использования скрипта для создания модальных окон
1. Пример кода, выполняющий открытие модального окна при нажатии на определённую кнопку.
2. Пример кода, позволяющий открыть одно и тоже модальное окно посредством клика на разные элементы (определяется элемент, который может открыть это окно, с помощью наличия у него атрибута data-toggle="modal" ):
3. Пример, в котором заголовок и содержимое модального окна определяется посредством значений data-атрибутов элемента, с помощью которого оно вызывается:
5. Пример, в котором создано 2 разных модальных окна. Первое модальное окно открывается при нажатии на одни элементы, а второе – при клике на другие:
6. Пример всплывающего окна, данные в которое загружаются с использованием AJAX:
7. Этот пример содержит код для обработки различных событий, связанных с модальном окном и кнопками, расположенными в нём:
Описание скрипта модального окна
В этом разделе приведена информация для тех, кто хочет более подробно разобраться с тем, как работает это модальное окно.
Её JavaScript код представлен посредством функции $modal :
В качестве результата эта функция возвращает объект, состоящий из 5 методов. Они позволяют нам выполнять различные действия над созданным модальным окном. Назначение каждого метода, а также различные примеры как их использовать мы уже подробно рассмотрели выше. Здесь мы более подробно разберём внутренние переменные и функции $modal .
В $modal имеются следующие переменные _elemModal , _eventShowModal , _eventHideModal , _hiding , _destroyed , _animationSpeed и функции _createModal , _showModal , _hideModal , _handlerCloseModal .
Функция _createModal предназначена для формирования HTML-кода модального окна (DOM структуры) и добавления её на страницу. В качестве результата она возвращает ссылку на базовый элемент этого модального окна. Т.к. нам эта ссылка нужна в других частях $modal , то сохраним её в переменную _elemModal :
Переменные _hiding и _destroyed используются для хранения состояний. Первая применяется для индикации процесса скрытия модального окна. Она имеет значение true во время скрытия окна, в остальных моментах - false . Вторая переменная хранит true или false , в зависимости от того, удалены ли DOM элементы модального окна со страницы и связанные с ним события или нет.
Переменная _animationSpeed используется для указания времени длительности процесса скрытия модального окна (в миллисекундах).
Функция _showModal предназначена для включения отображения модального окна на странице, а _hideModal – для его скрытия.
Читайте также: