0

Как сделать кнопку с иконкой крестика, которая по клику закрывала бы какой-то всплывающий блок?

4
  • 1
    а сами пытались сделать? что конкретно не получилось? 22 авг 2018 в 8:04
  • К кнопке добавить background-image, и в js прописать на событие onclick удаление нужного div по его id или классу. 22 авг 2018 в 8:05
  • @AndreyFedorov У меня есть код кнопки <button id="closeButton" style="position: relative;bottom:122px;right: -550px;background-repeat: no-repeat;background-image: url('img/icons/orders__close.png');" ;background-img:="" url(..="" img="" logo.png);="">close</button> Но нужно сделать, чтобы кнопка сама была подстроена под размер иконки
    – Midnight
    22 авг 2018 в 8:11
  • @Midnight но ведь это совсем другой вопрос, не про то как сделать закрытие окна, а про то как растянуть фон до размеров блока. 22 авг 2018 в 8:33

2 ответа 2

3

Для изменения размера крестика стоит лишь изменить размер шрифта.

/* Блок сообщения */
.alert {
    padding: 20px;
    background-color: green;
    color: white;
    margin-bottom: 15px;
}

/* Крестик */
.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 26px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}
<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  Тут Ваше сообщение
</div>

Пример взят с этого сайта.

0
0

Т.к. js в тегах вопроса вы не указали, вот решение html+css.

ps: Однако как я понял проблема у вас не в этом. Погуглите background-size: cover.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #ddd;
  padding: 16px;
}

.modal-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .2);
  display: flex;
}

.modal {
  width: 40vw;
  height: 40vh;
  background-color: white;
  margin: auto;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  position: relative;
}

.modal label {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 200%;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.modal label:hover {
  color: blue;
}

#openclose,
.modal-wrapper {
  display: none;
}

#openclose:checked~.modal-wrapper {
  display: flex;
}

#button {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
<label for="openclose" id="button">Открыть модальное окно</label>
<input type="checkbox" id="openclose">
<div class="modal-wrapper">
  <div class="modal">
    <label for="openclose">&times;</label>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.