1

Модальное окно добавляется на страницу динамический через js. Никак не получается закрыть модальное окно при нажатии кнопок okay, cancel или на крестик. Кнопки okay и cancel это ссылки, если поставить заглушку a href="#", то кнопки совсем не работают, если убрать то страница просто перезагружается. Пробовал через css свойство display: none и js hide(), не помогает. Как можно скрыть модальное окно?

let showModalWindow = (title, text) => {
    $('<div>').appendTo('body').addClass('modal').html(`
    <div class="modal_window">
    <div class="close_window"></div>
    <h2 class="modal_window_title">Resources</h2>
    <p class="modal_window_text">You want to see more information?</p>
    <div class="modal_buttons">
      <a href="#" class="modal_buttons_item">Okay</a>
      <a href="#" class="modal_buttons_item">Cancel</a>
      </div>
  </div>
    `)
  };
  $('.explore').on('click', () => {
    showModalWindow();
  });
  $('.modal_buttons_item').on('click', (event) => {
    event.stopPropagation();
    $('.modal').hide();
  });
  $('.close_window').on('click', (event) => {
    event.stopPropagation();
    $('.modal').hide();
  });
.modal {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal_window {
  width: 300px;
  height: 200px;
  background: rgb(248, 246, 246);
  border-radius: 3px;
  position: absolute;
  font-style: italic;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: inset 1px 1px 5px #abb1be;
}
.close_window{
  width: 16px;
  height: 16px;
  background: url(../img/ic-close.png) no-repeat;
  background-size: cover;
  border: 1px solid #858585;
  border-radius: 3px;
  cursor: pointer;
  align-self: flex-end;
  
}
.close_window:active{
 box-shadow: inset 0 0 2px #0d1119;
}

.modal_window_title {
  font-size: 30px;
  text-align: center;
  margin: 20px 0;
  text-transform: capitalize;
}
.modal_window_text{
  font-size: 16px;
  text-align: center;
}
.modal_buttons{
  width: 80%;
  display: flex;
  justify-content: space-around;
  margin-top: 35px;
}
.modal_buttons_item {
  width: 80px;
  height: 28px;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: normal;
  font-weight: bold;
  background: #0076B8;
  color: #fff;
  text-transform: uppercase;
  box-shadow:  1px 1px 2px #0d1119;
}
.modal_buttons_item:active{
  box-shadow: inset  1px 1px 2px #0d1119;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="advantages_item_link explore">Explore more</a>

2 ответа 2

1

Если Вы используете библиотеки, то нужно немного их изучать - сами по себе и за Вас они ни думать ни делать ничего не будут.

Прямая и делегированная обработка событий (параметр selector).

let showModalWindow = (title, text) => {
  $('<div>').appendTo('body').addClass('modal').html(`
    <div class="modal_window">
    <div class="close_window"></div>
    <h2 class="modal_window_title">Resources</h2>
    <p class="modal_window_text">You want to see more information?</p>
    <div class="modal_buttons">
      <a href="#" class="modal_buttons_item">Okay</a>
      <a href="#" class="modal_buttons_item">Cancel</a>
      </div>
  </div>
    `)
};
$('.explore').on('click', (event) => {
  event.preventDefault();
  showModalWindow();
});
$('body').on('click', 'div.modal .modal_buttons_item', (event) => {
  event.stopPropagation();
  event.preventDefault();
  $(event.target).closest('div.modal').hide();
});
$('body').on('click', 'div.modal .close_window', (event) => {
  event.stopPropagation();
  event.preventDefault();
  $(event.target).closest('div.modal').hide();
});
.modal {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal_window {
  width: 300px;
  height: 200px;
  background: rgb(248, 246, 246);
  border-radius: 3px;
  position: absolute;
  font-style: italic;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: inset 1px 1px 5px #abb1be;
}

.close_window {
  width: 16px;
  height: 16px;
  background: url(../img/ic-close.png) no-repeat;
  background-size: cover;
  border: 1px solid #858585;
  border-radius: 3px;
  cursor: pointer;
  align-self: flex-end;
}

.close_window:active {
  box-shadow: inset 0 0 2px #0d1119;
}

.modal_window_title {
  font-size: 30px;
  text-align: center;
  margin: 20px 0;
  text-transform: capitalize;
}

.modal_window_text {
  font-size: 16px;
  text-align: center;
}

.modal_buttons {
  width: 80%;
  display: flex;
  justify-content: space-around;
  margin-top: 35px;
}

.modal_buttons_item {
  width: 80px;
  height: 28px;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: normal;
  font-weight: bold;
  background: #0076B8;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 1px 1px 2px #0d1119;
}

.modal_buttons_item:active {
  box-shadow: inset 1px 1px 2px #0d1119;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="advantages_item_link explore">Explore more</a>

1

Присоединяюсь к сообщения выше, для работы с динамическим содержимым в jQuery можно работать так: $(document).on('click', 'class name or id', function () {});

let showModalWindow = (title, text) => {
    $('<div>').appendTo('body').addClass('modal').html(`
    <div class="modal_window">
    <div class="close_window"></div>
    <h2 class="modal_window_title">Resources</h2>
    <p class="modal_window_text">You want to see more information?</p>
    <div class="modal_buttons">
      <a href="#" class="modal_buttons_item">Okay</a>
      <a href="#" class="modal_buttons_item">Cancel</a>
      </div>
  </div>
    `)
  };
  
  $('.explore').on('click', (event) => {
    event.stopPropagation();
    showModalWindow();
  });
  
  $(document).on('click', '.modal_buttons_item', (event) => {
    event.stopPropagation();
    $('.modal').hide();
  });
  
  $(document).on('click', '.close_window', (event) => {
    event.stopPropagation();
    $('.modal').hide();
  });
.modal {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal_window {
  width: 300px;
  height: 200px;
  background: rgb(248, 246, 246);
  border-radius: 3px;
  position: absolute;
  font-style: italic;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: inset 1px 1px 5px #abb1be;
}
.close_window{
  width: 16px;
  height: 16px;
  background: url(../img/ic-close.png) no-repeat;
  background-size: cover;
  border: 1px solid #858585;
  border-radius: 3px;
  cursor: pointer;
  align-self: flex-end;
  
}
.close_window:active{
 box-shadow: inset 0 0 2px #0d1119;
}

.modal_window_title {
  font-size: 30px;
  text-align: center;
  margin: 20px 0;
  text-transform: capitalize;
}
.modal_window_text{
  font-size: 16px;
  text-align: center;
}
.modal_buttons{
  width: 80%;
  display: flex;
  justify-content: space-around;
  margin-top: 35px;
}
.modal_buttons_item {
  width: 80px;
  height: 28px;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: normal;
  font-weight: bold;
  background: #0076B8;
  color: #fff;
  text-transform: uppercase;
  box-shadow:  1px 1px 2px #0d1119;
}
.modal_buttons_item:active{
  box-shadow: inset  1px 1px 2px #0d1119;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="advantages_item_link explore">Explore more</a>

Ваш ответ

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

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