Создать рамку у диалога

Байт · Регистрация: 24.12.2010

Студворк — интернет-сервис помощи студентам

Пробовал по всякому

CSS
1
2
3
4
5
6
.ui-dialog {
  border: 2px #00aaaa solid;
}
#Dial {
  border: 2px #00aaaa solid;
}

HTML5
1
2
<div id='Dial' style=" border: 2px #00aaaa solid;">
...

Все никак не получается

Добавлено через 5 минут
Рамочка получается у содержимого, то есть у того, что после заголовка. А мне хочется весь диалог обрамить, как у настоящего виджета

Байт · 13.01.2020, 13:47 **[ТС]**

Однако, решение нашлось!

JavaScript
1
2
   $("#Dial").dialog({modal:true});
   $(".ui-dialog").css('border', '2px solid red');

Добавлено через 16 минут
И я уже не первый раз попадаю в эту ловушку. И все потому, что не четко представляю механизмы связывания.
В какой момент происходит применения стиля, указанного в <style type="text/css">, к элементам?
Вот я указал там

CSS
1
2
3
.ui-dialog {
  border: 2px #00aaaa solid;
}

Но в момент загрузки документа никакого класса ui-dialog еще не было! Он появился только после отработки функции dialog(). И вновь созданные элементы плевать хотели на все CSS. Присоединение стиля надо делать самому, ручками. Так?

Добавлено через 37 минут
Что еще больше путает. Если в стили поместить

CSS
1
2
3
4
.ui-dialog-title {
  background-color: #5774a4;
  color: #ffffff;
}

для оформления заголовка диалога, то это прекрасно работает!

@fixeri · 13.01.2020, 20:46

да нет, все работает как надо.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .ui-dialog {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
 
    <button id="btn">Доавить</button>
 
    <script type="text/javascript">
        "use strict";
 
        document.getElementById("btn").addEventListener("click", (e) => {
            let p = document.createElement("p");
            p.classList.add("ui-dialog");
            p.textContent = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.";
            e.target.before(p);
        });
    </script>
</body>
</html>

Байт · 13.01.2020, 22:07 **[ТС]**

Уважаемый fixeri! Спасибо, конечно, за участие. Но вы не ответили ни на один из моих вопросов. Возможно, вопросы были поставлены невнятно.
Впрочем, ладно. Как говорится - работает, и Слава Богу!
Все говорят - "Делай так!" и в книжках, и здесь. А мне интересны процессы, так сказать, внутренности. Нет, я не хочу изучать код броузеров, будь они хоть 10 раз открыты. Не нужны мне также многие детали, сколь бы интересны они не были в принципе, типа того, как хранятся данные - в стеке, списке, хэше и т.д. Я верю, что разработчики выбрали лучший вариант. Но вот чтоб писать грамотные программы, мне просто необходимо некоторое знание ихней подноготной. Иначе я подобен зэкам из повести Стругацких "Попытка к бегству", которые тыкали пальцы в непонятные отверствия непонятных машин. Иногда все было попусту, иногда пальцы откусывались, но иногда машина все-таки ехала.

@shvyrevvg · 14.01.2020, 11:51

Сообщение от Байт

И вновь созданные элементы плевать хотели на все CSS. Присоединение стиля надо делать самому, ручками.

Байт, стили применятся при добавлении элемента.

Сообщение от Байт

Рамочка получается у содержимого, то есть у того, что после заголовка.

Без архива с html/css/js сложно что-то сказать

Байт · 14.01.2020, 12:29 **[ТС]**

Сообщение от shvyrevvg

Байт, стили применятся при добавлении элемента.

Спасибо! Это вот действительно полезная информация. То есть, все мои рассуждения в посте 2 - полная ерунда? Так?
И скорее всего, просто где-то описался, не ту буковку поставил. Хотя все глаза просмотрел...

Сообщение от shvyrevvg

Без архива с html/css/js сложно что-то сказать

Понял. Однако, восстанавливать ситуацию, где возникла ошибка, сейчас в лом. А тем более ее локализировать.
До следующего раза...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Байт Диссидент 27714 / 17332 / 3810 Регистрация: 24.12.2010 Сообщений: 38,978
	13.01.2020, 22:07 [ТС]
	Уважаемый fixeri! Спасибо, конечно, за участие. Но вы не ответили ни на один из моих вопросов. Возможно, вопросы были поставлены невнятно. Впрочем, ладно. Как говорится - работает, и Слава Богу! Все говорят - "Делай так!" и в книжках, и здесь. А мне интересны процессы, так сказать, внутренности. Нет, я не хочу изучать код броузеров, будь они хоть 10 раз открыты. Не нужны мне также многие детали, сколь бы интересны они не были в принципе, типа того, как хранятся данные - в стеке, списке, хэше и т.д. Я верю, что разработчики выбрали лучший вариант. Но вот чтоб писать грамотные программы, мне просто необходимо некоторое знание ихней подноготной. Иначе я подобен зэкам из повести Стругацких "Попытка к бегству", которые тыкали пальцы в непонятные отверствия непонятных машин. Иногда все было попусту, иногда пальцы откусывались, но иногда машина все-таки ехала. 0