Позиционирование ссылки по крестику в CSS

Question

проблема в позиционировании ссылки. Хочу сделать модальное окно, закрывающееся по крестику, который должен располагаться на n-ом расстоянии от правого верхнего угла, но в таком случае у меня выходит, что нажать можно лишь по самому крестику или по невидимому div (16x16) чуть левее блока, а я хочу, чтобы был активен сам крестик и зона вокруг него.

var modal = document.getElementById('modal-pass-change');
var btn = document.getElementById("pass-change");
var img = document.getElementById("cross-pass-change");
var bcg = document.getElementById("modal-overlay")

btn.onclick = function() {
  modal.style.display = "block";
  bcg.style.display = "block";
}

img.onclick = function() {
  modal.style.display = "none";
  bcg.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    bcg.style.display = "none";
  }
}

.pass-change {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 995;
  width: 600px;
  max-width: 100%;
  height: 400px;
  max-height: 100%;
}

.modal-overlay {
  z-index: 990;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: none;
}

.pass-change-content {
  background-color: #fff;
  width: 600px;
  max-width: 100%;
  height: 350px;
  max-height: 100%;
}

.cross {
  float: right;
  position: absolute;
  cursor: pointer;
  right: 23px;
  top: 30px;
  width: 16px;
  height: 16px;
}

.crossin {
  position: absolute;
  top: 5px;
  left: 10px;
}

.crossin:before,
.crossin:after {
  content: "";
  position: absolute;
  width: 24px;
  height: 4px;
  background: red;
}

.crossin:before {
  transform: rotate(45deg);
}

.crossin:after {
  transform: rotate(-45deg);
}

<button id="pass-change" class="graybutton">Изменить пароль</button>
<div id="modal-pass-change" class="pass-change" style="display: none;">
  <div class="pass-change-content">
    <div class="cross" id="cross-pass-change">
      <div class="crossin"></div>
    </div>
    <p>1</p>
  </div>
</div>
<div class="modal-overlay" id="modal-overlay" style="display: none;"></div>

Answer 1

Смотрите, оно? У вас там лишние элементы, они не нужны. Немного сократил код:

var modal = document.getElementById('modal-pass-change');
var btn = document.getElementById("pass-change");
var img = document.getElementById("cross-pass-change");
var bcg = document.getElementById("modal-overlay")

btn.onclick = function() {
  modal.style.display = "block";
  bcg.style.display = "block";
}

img.onclick = function() {
  modal.style.display = "none";
  bcg.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    bcg.style.display = "none";
  }
}

.pass-change {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 995;
  width: 600px;
  max-width: 100%;
  height: 400px;
  max-height: 100%;
}

.modal-overlay {
  z-index: 990;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: none;
}

.pass-change-content {
  position: relative;
  background-color: #fff;
  width: 600px;
  max-width: 100%;
  height: 350px;
  max-height: 100%;
}

.cross {
  position: absolute;
  cursor: pointer;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
}

.cross:before,
.cross:after {
  content: "";
  position: absolute;
  top: 13px;
  right: 3px;
  width: 24px;
  height: 4px;
  background: red;
}

.cross:before {
  transform: rotate(45deg);
}

.cross:after {
  transform: rotate(-45deg);
}


.cross:hover {background: greenyellow;} /*Это можно удалить*/

<button id="pass-change" class="graybutton">Изменить пароль</button>
<div id="modal-pass-change" class="pass-change" style="display: none;">
  <div class="pass-change-content">
    <div class="cross" id="cross-pass-change"></div>
    <p>1</p>
  </div>
</div>
<div class="modal-overlay" id="modal-overlay" style="display: none;"></div>

БЛОГ НА HUSL

Позиционирование ссылки по крестику в CSS

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