0

Есть несколько модальных окон:

Пример с моими тщетными попытками

При раскрытии модального окна есть копка при клике на которую, окно должно закрываться, проблема в том, что кнопка отрабатывает только на последнем окне Как правильно пройтись по элементам, чтобы эта копка и последующие элементы, например (window.onclick) отрабатывались на всех окнах?

1
  • "id = messageDialogBtnClose" - id должно быть уникальным.
    – haswell
    4 сен 2018 в 6:16

1 ответ 1

2

У вас на странице не должно быть элементов с одинаковым id. Ваш код не стал разбирать, набросал свой вариант, можно сделать так.

document.addEventListener('DOMContentLoaded', function() {

  // Вешаем событие при нажатии на Show
  var Show = document.getElementsByClassName('button-light');
  [].forEach.call(Show, function(element, i) {       
    element.addEventListener('click', function(){
      showMessageDialog(i);
    });
  });

  // Вешаем событие при нажатии на Ok
  var Close = document.getElementsByClassName('button-primary');
  [].forEach.call(Close, function(element, i) {       
    element.addEventListener('click', function(){
      closeMessageDialog(i);
    });
  });

});

function showMessageDialog(i){
  var modal = document.getElementsByClassName('ui-message-box__wrapper')[i];   
  modal.style.display = "block";   
}

function closeMessageDialog(i){
  var modal = document.getElementsByClassName('ui-message-box__wrapper')[i];   
  modal.style.display = "none";   
}
.ui-message-box__wrapper {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2002;
	background-color: rgba(39,39,39,0.48);
}

.ui-message-box {
	display: block;
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 400px;
	transform: translateX(-50%);
	padding: 12px 14px;
	background-color: #edf2fc;
	border: 1px solid #ebeef5;
	border-radius: 8px;
	z-index: 2000;
	animation: fadeInDown 0.3s;
	overflow: hidden;
}

.ui-message-box .button-close {
	width: 22px;
	height: 22px;
}

.ui-message-box__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 8px;
	margin-bottom: 8px;
}

.ui-message-box__content {
	margin-bottom: 16px;
}

.ui-message-box__footer {
	text-align: right;
  cursor: pointer;
}

.message-box-title {
	font-size: rem(24);
}

@-moz-keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@-o-keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
<section class="message-box-doc">
    <div class="container"><span class="ui-title-2">Standart Message-box:</span>
      <div class="example-empty">
        <div class="ui-message-box__wrapper" id="exampleModal">
          <div class="ui-message-box">
            <div class="ui-message-box__header"><span class="message-box-title">Title</span><span class="button-close" ></span></div>
            <div class="ui-message-box__content"><span>Message is here</span></div>
            <div class="ui-message-box__footer">
              <div class="button button-primary">OK</div>
            </div>
          </div>
        </div>
        <div class="button button-light">Show</div>
      </div>
    </div>
  </section>
  <section class="message-box-doc">
    <div class="container"><span class="ui-title-2">Standart Message-box:</span>
      <div class="example-empty">
        <div class="ui-message-box__wrapper" id="exampleModal2">
          <div class="ui-message-box">
            <div class="ui-message-box__header"><span class="message-box-title">Title2</span><span class="button-close" ></span></div>
            <div class="ui-message-box__content"><span>Message is here2</span></div>
            <div class="ui-message-box__footer">
              <div class="button button-primary">OK</div>
            </div>
          </div>
        </div>
        <div class="button button-light">Show</div>
      </div>
    </div>
  </section>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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