- 16, May 2024
- #1
Всем привет,
Я использую чистый шаблон CSS для модальных всплывающих окон. Я хотел бы знать, как сделать ссылку на уже «всплывающее» модальное окно, чтобы я мог поделиться им.
Спасибо
скрипка
HTML
ОТКРЫТЬ
<статья>
Модальный контент здесь!
CSS
этикетка {
цвет: #00f;
оформление текста: подчеркивание;
курсор: указатель
}
.модальный,
.модальный * {
размер коробки: граница-коробка;
-moz-box-size: рамка-коробка;
переход: все .2s с легкостью выхода
}
.modal:проверено+.modal {
непрозрачность: 1;
события указателя: все
}
.модальный {
положение: фиксированное;
верх: 0;
слева: 0;
ширина: 100%;
высота: 100%;
z-индекс: 500;
отступ: 15 пикселей;
переполнение-y: прокрутка;
непрозрачность: 0;
события указателя: нет
}
.модальная статья {
фон: #fff;
ширина: 100%;
отступ: 50 пикселей;
положение: относительное;
z-индекс: 700
}
.modal .close
efore {
содержимое: '×';
дисплей: блок;
отступ: 20 пикселей 30 пикселей;
размер шрифта: 200%;
позиция: абсолютная;
верх: 0;
правильно: 0;
z-индекс: 800;
курсор: указатель
}
.modal .close:hoverefore {
цвет: #c00
}
.modal .overlay {
положение: фиксированное;
верх: 0;
слева: 0;
ширина: 100%;
высота: 100%;
фон: rgba(0, 0, 0, .5);
z-индекс: 600;
курсор: указатель
}
Я использую чистый шаблон CSS для модальных всплывающих окон. Я хотел бы знать, как сделать ссылку на уже «всплывающее» модальное окно, чтобы я мог поделиться им.
Спасибо
скрипка
HTML
ОТКРЫТЬ
<статья>
Модальный контент здесь!
CSS
этикетка {
цвет: #00f;
оформление текста: подчеркивание;
курсор: указатель
}
.модальный,
.модальный * {
размер коробки: граница-коробка;
-moz-box-size: рамка-коробка;
переход: все .2s с легкостью выхода
}
.modal:проверено+.modal {
непрозрачность: 1;
события указателя: все
}
.модальный {
положение: фиксированное;
верх: 0;
слева: 0;
ширина: 100%;
высота: 100%;
z-индекс: 500;
отступ: 15 пикселей;
переполнение-y: прокрутка;
непрозрачность: 0;
события указателя: нет
}
.модальная статья {
фон: #fff;
ширина: 100%;
отступ: 50 пикселей;
положение: относительное;
z-индекс: 700
}
.modal .close
efore {
содержимое: '×';
дисплей: блок;
отступ: 20 пикселей 30 пикселей;
размер шрифта: 200%;
позиция: абсолютная;
верх: 0;
правильно: 0;
z-индекс: 800;
курсор: указатель
}
.modal .close:hoverefore {
цвет: #c00
}
.modal .overlay {
положение: фиксированное;
верх: 0;
слева: 0;
ширина: 100%;
высота: 100%;
фон: rgba(0, 0, 0, .5);
z-индекс: 600;
курсор: указатель
} 
![[Виктория Волевач] Всегда молода](/assets/images/icons/forum2.png){kind=icon}
![[Фишка] Кач для 90+](/assets/images/icons/forum6.png){kind=icon}