HTML CSS: Есть ли способ создать контейнер (модальный) в "вакууме" от остальной части страницы, чтобы к нему не применялся другой стиль?

#javascript #html #css #bootstrap-4 #modal-dialog

#javascript #HTML #css #bootstrap-4 #modal-dialog

Вопрос:

Я загрузил бесплатный шаблон начальной загрузки, в котором много страниц с множеством стилей и сценариев.

Когда я пытаюсь добавить html-контейнер на эту страницу (которая является модальной / всплывающей), к нему применяются все стили от тела до заголовков, что полностью нарушает его.

Итак, поскольку я не хочу создавать класс / идентификатор для всех, а некоторой ширины / высоты для родительского и основного стилей невозможно избежать, не нарушая поток шаблонов, мне интересно, есть ли способ создать html-контейнер с какой-либо опцией, при добавлении которой к нему не применяется абсолютно никакой другой стиль, и я могу оформить его так, как я хочу, независимо от того, что происходит вокруг него?

Может ли z-index работать здесь?

L.РЕДАКТИРОВАТЬ Я добавил код здесь, в codepen, [codepen modal][1] введите описание ссылки здесь

Модальный должен выглядеть так, как в codepen, но вместо этого он распределен так, как здесь, на этом скриншоте.

1. индекс z указывает только, на какую глубину элемент будет размещен на странице. Все остальные стили будут унаследованы. Вероятно, вам нужно будет поместить класс в свой модальный, который устанавливает все css, которые необходимо переопределить. Iframe игнорировал бы все остальные CSS на странице, но использовать iframe не очень удобно, потому что у вас проблемы с вашей темой.

2. пожалуйста, добавьте демонстрацию в codepen или добавьте HTML и CSS-код.

3. я добавил то, что вы просили

4. Вы пробовали использовать CSS с более высокой специфичностью, как указано здесь, в обновленной версии вашего codepen ?

5. да, я делаю это, поскольку больше ничего из того, что я пробовал, не работает, но это довольно медленный и утомительный процесс, поэтому я спрашивал, существует ли какой-нибудь код, который мог бы сделать это проще.

Ответ №1:

Ваш стиль для вашего пользовательского элемента должен быть более специфичным, чем другой стиль, который объявлен. Взгляните на эту замечательную статью Эммы Бостиан :

https://dev.to/emmabostian/css-specificity-1kca#:~:text=CSS Specificity is the set,present on the element’s style.

Ответ №2:

В CSS есть следующее свойство:

 #Element {
   all: initial;
}

Это должно сбросить все стили родительских элементов, включая контейнер, в который помещен элемент, и тело.

Попробуйте это и объявите стили после.