Якорь в модальном окне вылетает

Question

Сделал якорь в модальном окне. При нажатии на ссылку он переходит, но закрывается модальное окно. Как его не закрывать?

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z - index: 1050;
  opacity: 0;
  - webkit - transition: opacity 400 ms ease - in;
  - moz - transition: opacity 400 ms ease - in;
  transition: opacity 400 ms ease - in;
  pointer - events: none;
}

.modal: target {
  opacity: 1;
  pointer - events: auto;
}

.modal - dialog {
  position: relative;
  margin: 10 px;
}

@media(min - width: 1000 px) {
  .modal - dialog {
    max - width: 1000 px;
    margin: 30 px auto;
  }
}

.modal - content {
  position: relative;
  display: -webkit - box;
  display: -webkit - flex;
  display: -ms - flexbox;
  display: flex;
  - webkit - box - orient: vertical;
  - webkit - box - direction: normal;
  - webkit - flex - direction: column;
  - ms - flex - direction: column;
  flex - direction: column;
  background - color: #fff;
  - webkit - background - clip: padding - box;
  background - clip: padding - box;
  border: 1 px solid rgba(0, 0, 0, .2);
  border - radius: .3 rem;
  outline: 0;
}

@media(min - width: 768 px) {
  .modal - content {
    -webkit - box - shadow: 0 5 px 15 px rgba(0, 0, 0, .5);
    box - shadow: 0 5 px 15 px rgba(0, 0, 0, .5);
  }
}

.modal - header {
  display: -webkit - box;
  display: -webkit - flex;
  display: -ms - flexbox;
  display: flex;
  - webkit - box - align: center;
  - webkit - align - items: center;
  - ms - flex - align: center;
  align - items: center;
  - webkit - box - pack: justify;
  - webkit - justify - content: space - between;
  - ms - flex - pack: justify;
  justify - content: space - between;
  padding: 15 px;
  border - bottom: 1 px solid# eceeef;
}

.modal - title {
  margin - top: 0;
  margin - bottom: 0;
  line - height: 1.5;
  font - family: 'Inter';
  font - style: normal;
  font - weight: 400;
  font - size: 25 px;
}

.close {
  float: right;
  font - family: sans - serif;
  font - size: 24 px;
  font - weight: 700;
  line - height: 1;
  color: #000;
  text-shadow: 0 1px 0 # fff;
  opacity: .5;
  text - decoration: none;
}

.close: focus,
.close: hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: .75;
}

.modal-body {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 15px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.stagestory {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 60px;
  color: Black;
  display: inline;
  cursor: default;
}

# textstory {
  font - family: 'Inter';
  font - style: normal;
  font - weight: 400;
  font - size: 30 px;
  color: Black;
  cursor: default;
}

# storyimg {
  margin: 0 auto;
  align - items: center;
  width: 300 px;
}

.stages {
  width: 60 %;
  margin - left: 10 px;
  overflow - x: scroll;
  white - space: nowrap;
  white - space: nowrap;
}

.stagestext {
  font - family: 'Inter';
  font - style: normal;
  font - weight: 400;
  font - size: 15 px;
  color: Black;
  text - decoration: none;
  margin - left: 10 px;
}

.stages::-webkit - scrollbar {
  height: 5 px;
}

<body>
  <a href="#openModal" class="link">история</a>
  <div id="openModal" class="modal">
    <div class="modal-dialog">
      <div class="modal-content" style="height: 400px;">
        <div class="modal-header">
          <h3 class="modal-title">история</h3>
          <div class="stages">
            <a href="#couble" class="stagestext">Каменный век</a>
            <a href="#metall" class="stagestext">Эпоха раннего металла</a>
          </div>
          <a href="#close" title="Close" class="close">×</a>
        </div>
        <div class="modal-body">
          <h1 class="stagestory" id="couble">Каменный век</h1>
          <p id="textstory">hahahahahhah</p>
          <h1 class="stagestory" id="metall">Эпоха раннего металла</h1>
          <p id="textstory">hahahahahahahhahahahahaah</p>
        </div>
      </div>
    </div>

БЛОГ НА HUSL

Якорь в модальном окне вылетает

Ответы (0 шт):