Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.
DLE FAQ » Все вопросы » Шаблоны (TPL) » Как оформить модальное окно?

Как оформить модальное окно?

     Шаблоны (TPL), jQuery    3923

вопрос
Здравствуйте. Ребят, у меня есть не очень-то красивые всплывающие окна
Как оформить модальное окно?

Так же у меня уже есть готовое решение дизайна.
Появляется проблема адаптации.
Далее код исходной страницы сайта на примере модального окна вставки ссылки из bb кодов:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front modalfixed dle-popup-promt ui-dialog-buttons ui-draggable" tabindex="-1" role="dialog" style="height: auto; width: 500px; top: 84px; left: 433px; display: block; position: fixed;" aria-describedby="dlepopup" aria-labelledby="ui-id-1"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">Ввод информации</span><button class="ui-dialog-titlebar-close"></button></div><div id="dlepopup" class="dle-promt ui-dialog-content ui-widget-content" style="width: auto; min-height: 16px; max-height: none; height: auto;">Введите полный URL ссылки<br><br><input type="text" name="dle-promt-text" id="dle-promt-text" class="ui-widget-content ui-corner-all" style="width:97%; padding: .4em;" value="http://"></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button">Отмена</button><button type="button">Ввод</button></div></div></div>

Мне надо заменить классы
ui-dialog ui-widget ui-widget-content ui-corner-all ui-front modalfixed dle-popup-promt ui-dialog-buttons ui-draggable

на один, например, "modal-dialog"
Все эти классы 
ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix

на "modal-header"
Подскажите пожалуйста как эффективнее это сделать? Прописывать стили пытался, и через !important тоже - это не то. Надо изменить в корне.
Заранее спасибо

Ответа пока нет

 

5 комментариев

nurbekov
Юзер

nurbekov - -

Я понимаю, что это все в dle_js.js , но там черт ногу сломит...
nurbekov
Юзер

nurbekov - -

Я ведь о стиле говорю.
irrwisch
Юзер

irrwisch - -

Так Вы документацию почитайте внимательней

Theming

The dialog widget uses the jQuery UI CSS framework to style its look and feel. If dialog specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option:

ui-dialog: The outer container of the dialog. If the draggable option is set, the ui-dialog-dragging class is added during a drag. If the resizable option is set, the ui-dialog-resizing class is added during a resize. If the buttons option is set, the ui-dialog-buttons class is added.
ui-dialog-titlebar: The title bar containing the dialog's title and close button.
ui-dialog-title: The container around the textual title of the dialog.
ui-dialog-titlebar-close: The dialog's close button.
ui-dialog-content: The container around the dialog's content. This is also the element the widget was instantiated with.
ui-dialog-buttonpane: The pane that contains the dialog's buttons. This will only be present if the buttons option is set.
ui-dialog-buttonset: The container around the buttons themselves.
Additionally, when the modal option is set, an element with a ui-widget-overlay class name is appended to the <body>.

Вот и оформляйте как вам нужно
nurbekov
Юзер

nurbekov - -

Это я уже знал, я же сказал, что хочу заменить классы на подобии ui-dialog на свои, но как я уже понял, это невозможно. А в целом спасибо за ответ :)

Похожие вопросы

 20.03.2013 zodigan  Общие вопросы, Общие вопросы по вёрстке, Шаблоны (TPL)
 01.04.2013 pippak  Шаблоны (TPL)
 30.09.2013 grenth  Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS), jQuery
 18.10.2013 netread  Общие вопросы, Шаблоны (TPL), Общие вопросы по PHP
 09.11.2013 neadekvad  Шаблоны (TPL), Стили (CSS)
 11.03.2014 savenco  Шаблоны (TPL), Стили (CSS)
 14.03.2014 alexcreew  Шаблоны (TPL), Стили (CSS)
 15.06.2014 Zoom4ikDan4ik  Шаблоны (TPL)
 13.08.2014 Killerkiss  Шаблоны (TPL)
 15.09.2014 G-3p  Шаблоны (TPL)
  • Puxlik | Telegram Sender 13
    Фото Puxlik
    Puxlik
    Telegram Sender
    Версию 17.1 поддерживает ?
  • TeraMoune | Не загружается изображение [Ошибка HTTP] ... 2
    Фото TeraMoune
    TeraMoune
    Не загружается изображение [Ошибка HTTP]. Как исправить?
    В этой версии есть фрагментация загрузки файла когда загружаемый файл разделяется на фрагменты, по умолчанию 1 фрагмент 1.5мб. (И у вас написано лимиты на файл 4мб и картинки 5.86мб, этого достаточно чтобы принимать 1.5мб фрагменты) И если бы была проблема с весом или чем-то подобным то об этом бы сервер сообщил. Сервер отдал 500 ошибку это значит что угодно, нужно смотреть ответ от сервера в консоли разработчика или логах.
  • RedFox | Не загружается изображение [Ошибка HTTP] ... 2
    Фото RedFox
    RedFox
    Не загружается изображение [Ошибка HTTP]. Как исправить?
    "Некоторые картинки загружаются, но большинство нет."

    Сначала не обратил внимания, но видимо проблема в этом. Все, что больше 100Кб, не загружается. Что странно, поскольку в php у меня следующие значения:
    post_max_size = 100M
    upload_max_filesize = 100M
    max_file_uploads = 20

    Полагаю, где-то еще надо увеличить размер загружаемой картинки, но где?
  • LMakc | Модуль читалка pdf 1
    Фото LMakc
    LMakc
    Модуль читалка pdf
    Не начинай, я заплатил сегодня штраф за підручники. Сейчас очень сложно с этим.
  • ssssss | Сделать подсчет количества символов в ко ... 5
    Фото ssssss
    ssssss
    Сделать подсчет количества символов в комментариях
    Есть актуальный плагин под 17 версию? (только количество символов! без наворотов... записей куда-либо и т.п.) *ББ-редактор
  • alex.sg.spb | Как вывести информацию о обновлении ново ... 8
    Фото alex.sg.spb
    alex.sg.spb
    Как вывести информацию о обновлении новости, но на время?
    вопрос, в продолжение поста. Помогите с кодом вывода инфо UPDATE на краткой новости, так чтобы не нужно было нажимать внутри новости при редактировании галочку?
  • Kentavr | Как вместо %20 в адресной строке подстав ... 9
    Фото Kentavr
    Kentavr
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    Спасибо огромное. Этот вариант самый простой и рабочий!
  • derebas | Как вместо %20 в адресной строке подстав ... 9
    Фото derebas
    derebas
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    К черту htaccess давайте проще

    к href добавьте id="xfield_value"
    <a href="/company/[xfvalue_company]/" id="xfield_value">[xfvalue_company]</a>

    И добавьте скрипт обработчик 
    <script>
document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('a#xfield_value');

    links.forEach(link => {
      let href = link.getAttribute('href');

      if (href) {
        href = href.replace(/ /g, '+');
        link.setAttribute('href', href);
      }
    });
  });
</script>
  • Kentavr | Как вместо %20 в адресной строке подстав ... 9
    Фото Kentavr
    Kentavr
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    Так сайт не работает вообще. Браузер выдает такое

    Страница недоступна Сайт ... выполнил переадресацию слишком много раз.
    Попробуйте удалить файлы cookie.

    ERR_TOO_MANY_REDIRECTS

    Куки чистил не помогает
  • derebas | Как вместо %20 в адресной строке подстав ... 9
    Фото derebas
    derebas
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    Попробуйте так
    RewriteEngine On
    RewriteCond %{REQUEST_URI} %20
    RewriteRule (.*)%20(.*) $1+$2 [N]
    RewriteRule (.*) $1 [R=301,L]
наверх