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

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


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

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

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

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

irrwisch
Юзер

irrwisch - 19 октября 2016 23:27 -


nurbekov
Юзер

nurbekov - 19 октября 2016 23:29 -

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

irrwisch
Юзер

irrwisch - 19 октября 2016 23:55 -

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

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 - 19 октября 2016 23:57 -

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

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

наверх