Как изменить модульное окно, чтобы оно открывалось в этой же вкладке (css+html)
Модульное окно в той же вкладке не открывается по кнопке. Чтобы его открыть нужно нажать на правую кнопку мыши, потом выбрать "открыть в новой вкладке" перейти на эту новую вкладку и только потом увижу свое модульное окно. Может кто встречался с подобной проблемой и знает как её исправить, может что еще дописать надо или наоборот поменять атрибут. Буду очень благодарна за помощь.
вот css код:
.u-btn-3 {
font-weight: 700;
text-transform: uppercase;
font-size: 0.875rem;
letter-spacing: 1px;
margin: 20px auto 0 15px;
}
.iw-modal-btn {
background:#013C74; /*цвет фона кнопки*/
color:#fff; /*цвет шрифта*/
text-align:center;
display:inline-block;
padding:10px 20px; /*внутренние отступы*/
text-decoration:none;
font-size:17px; /*размер шрифта*/
margin-top:30px;
transition: all 0.5s ease;
}
.iw-modal-btn:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
background:#439DE0; /*цвет фона при наведении*/
}
/*CSS-свойства для заднего фона*/
.iw-modal {
opacity: 0; /*изначально этот блок должен быть прозрачным*/
background: rgba(0,0,0,0.7); /*задаём цвет фона*/
pointer-events: none; /*делаем чтобы по элементу нельзя было кликнуть когда он прозрачный*/
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
transition: all 0.5s ease;
margin: 0;
padding: 0;
}
.iw-modal:target {
opacity: 1; /*при клике блок становится видимым*/
pointer-events: auto; /*теперь по блоку можно кликать мышкой*/
overflow-y: auto; /*прокрутка по вертикли страницы*/
}
.iw-modal-wrapper {
margin:auto; /*выравниваем модальное окно по центру по горизонтали*/
margin-top:25vh; /*отступ сверху можно задавать в px, % или vh*/
}
/*CSS-свойства для блока, содержащего контент модального окна */
.iw-CSS-modal-inner {
position: relative;
background: #fff; /*цвет фона*/
border: 1px solid #ccc; /*цвет и толщина рамки*/
border-radius: 0px; /*радиус скругления углов*/
}
/*CSS-свойства заголовка модального окна */
.iw-modal-header {
padding: 15px;/*внутренний отступ*/
background:#f1f1f1;/*цвет фона*/
position:relative;
}
.iw-modal-title {
font-size: 18px; /*размер шрифта*/
color:#555; /*цвет шрифта*/
font-weight:bold; /*жирность шрифта*/
line-height: 1.5; /*высота строки*/
margin-top: 0;
margin-bottom: 0;
}
/*CSS для кнопки закрытия*/
.iw-close {
position:absolute;
top:15px; /*отступ сверху*/
right:10px; /*отступ справа*/
font-size: 24px; /*размер шрифта*/
color: #555; /*цвет шрифта*/
text-decoration: none;
}
.iw-close:hover, .iw-close:focus {
color: #000; /*цвет шрифта при наведении*/
cursor: pointer;
}
/*CSS для блока с текстом*/
.iw-modal-text {
padding: 15px 20px; /*внутренний отступ*/
}
/**MEDIA**/
@media (min-width: 550px) {
.iw-modal-wrapper {
max-width: 500px;
}}
вот что писала в html:
<a href="#iw-modal" class="u-btn u-btn-round u-button-style u-hover-palette-1-light-1 u-palette-1-base u-radius-50 u-btn-3"> Подробнее</a>
<div id="iw-modal" class="iw-modal">
<div class="iw-modal-wrapper">
<div class="iw-CSS-modal-inner">
<div class="iw-modal-header">
<h3 class="iw-modal-title">Информация</h3>
<a href="#close" title="Закрыть" class="iw-close">×</a>
</div>
<div class="iw-modal-text">
...
Источник: Stack Overflow на русском