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>

Ваш ответ

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

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