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

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

вопрос

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

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

TeraMoune | Как отключить миниатюры стандартной гале ...
TeraMoune
Как отключить миниатюры стандартной галереи Fancybox?
Сегодня, 06:00
В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

Например: параметр Thumbs: false отключает миниатюры.
```
Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
```
derebas | Как реализовать шифрование трафика? ³

derebas
Как реализовать шифрование трафика?
18-11-2024, 16:52

Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:46

я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
Так и было...
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:39

чтоб не удалять выстави права и пользователя какие там идут на файлы. .
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:37

т.е. мне снести всё, что я уже загрузил как root, зайти под юзером и закачать снова?
Видосы в директории upload можно хоть оставить? их там 80 Гб
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:17

фтп обычный юзер а не root
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:15

дэк только так и загружаю
Gordi | Как реализовать шифрование трафика? ³

Gordi
Как реализовать шифрование трафика?
18-11-2024, 14:14

я тоже не понимаю....товарищ один, представитель хостинга сказал, что даже есть модули такие специальные под популярные цмс
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:13

Gordi,
через фтп загружай
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:11

Привет Николай!
Всегда загружал от root... посмотришь может? твой плагин тоже не виден ((
или направь на путь истинный, пжст