Как изменить модульное окно, чтобы оно открывалось в этой же вкладке (css+html)

Рейтинг: 0Ответов: 1Опубликовано: 19.05.2023

Модульное окно в той же вкладке не открывается по кнопке. Чтобы его открыть нужно нажать на правую кнопку мыши, потом выбрать "открыть в новой вкладке" перейти на эту новую вкладку и только потом увижу свое модульное окно. Может кто встречался с подобной проблемой и знает как её исправить, может что еще дописать надо или наоборот поменять атрибут. Буду очень благодарна за помощь.

вот 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">
        ...

Ответы

▲ 0

Код рабочий. Возможно, Вы его запускаете как-то неправильно?

.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;
  }}
<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>
  </div>
</div>