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

nurbekov 19.10.2016 Шаблоны (TPL), jQuery 3990

вопрос

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

Так же у меня уже есть готовое решение дизайна.
Появляется проблема адаптации.
Далее код исходной страницы сайта на примере модального окна вставки ссылки из 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 - 2014-09-1519 октября 2016 23:04 - #59500

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

Юзер

494

irrwisch - 2014-09-1519 октября 2016 23:27 - #59502

http://api.jqueryui.com/dialog/

Юзер

nurbekov - 2014-09-1519 октября 2016 23:29 - #59503

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

Юзер

494

irrwisch - 2014-09-1519 октября 2016 23:55 - #59504

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

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 - 2014-09-1519 октября 2016 23:57 - #59505

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

non-stop | Как решить проблему индексации DLE в пои ... ¹

non-stop
Как решить проблему индексации DLE в поиске Bing?
19-12-2024, 17:02

Забыл написать что обновился до последней версии 17.3
Интересно узнать, это только у меня проблема, или это проблема движка? проверьте свои сайты на наличие в поиске Bing.
В 11 винде именно эта поисковая система стоит по умолчанию . кроме того эта же поисковая система отвечает за индекс еще одного поисковика - yahoo. Эти системы могут давать дополнительный процент пискового трафика на сайты.
lutskboy | Как максимально грамотно организовать до ... ¹

lutskboy
Как максимально грамотно организовать добавление материалов через SQL-запросы?
18-12-2024, 21:39

все верно. related_ids автоматом заполняется потом.
derebas | Убираем xfsearch из адресной строки ⁷

derebas
Убираем xfsearch из адресной строки
16-12-2024, 02:35

в правилах транслитерации для tagvalue поставьте замену " " => "-", например так
str_replace(array('.', ' ', '/', '&', "'", '+', '«', '»', ':', '!'), array('', '-', '-', 'and', '', '', '', '', '', '')
toxicpioner | Убираем xfsearch из адресной строки ⁷

toxicpioner
Убираем xfsearch из адресной строки
15-12-2024, 19:31

если в доп поле есть пробел, будет выдавать просто 403 стр
dj-avtosh | Воспользовался хаком удаление html из ад ... ²

dj-avtosh
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
12-12-2024, 17:26

Нужно правило с year поднять выше всех в .htaccess
TeraMoune | Воспользовался хаком удаление html из ад ... ²

TeraMoune
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
11-12-2024, 22:12

У вас убрано слишком много отличительных признаков в ссылках и теперь ссылки пересекаются. Убрали xfsearch, убрали html, а так же зачем то убрали дефиз разделяющий id и alt_name. Теперь некоторые ссылки будут отвечать выражению под правила ссылок новостей. Исправить вы можете только переосмыслив эти ссылки и добавить в них каких-то отличительных особенностей, переосмыслить чпу.
toxicpioner | Как упорядочить ID новостей ¹⁹

toxicpioner
Как упорядочить ID новостей
9-12-2024, 22:24

***Комментарий удален***
DnCnv | Как показать только одну категорию, к ко ... ¹

DnCnv
Как показать только одну категорию, к которой принадлежит новость?
9-12-2024, 01:46

***Комментарий удален***
web102 | Почему не отображается картинка в галере ... ³

web102
Почему не отображается картинка в галерее?
4-12-2024, 11:49

дайте адрес сайта. можно в личку
Shandi | Почему не отображается картинка в галере ... ³

Shandi
Почему не отображается картинка в галерее?
3-12-2024, 08:53

Мне как ламеру ничего не понятно:( Кто-то это исправляет за денужку?