Untitled

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <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" id="messageDialogBtnClose"></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" id="messageDialogBtnClose">OK</div>
            </div>
          </div>
        </div>
        <div class="button button-light" id="exampleModalBtn">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" id="messageDialogBtnClose"></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" id="messageDialogBtnClose">OK</div>
            </div>
          </div>
        </div>
        <div class="button button-light" id="exampleModalBtn2">Show</div>
      </div>
    </div>
  </section>
    <script type="text/javascript">
      showMessageDialog('#exampleModal', '#exampleModalBtn') 
      showMessageDialog('#exampleModal2', '#exampleModalBtn2') 
      //- showMessageDialog('#exampleModal3', '#exampleModalBtn3') 
  </script>

</body>

</html>

function showMessageDialog(messageDialog, messageDialogBtn){
  var messageDialog = document.querySelectorAll(messageDialog);
  var messageDialogBtn = document.querySelectorAll(messageDialogBtn);
  var messageDialogBtnClose = document.querySelectorAll('#messageDialogBtnClose');
  
  for (var i = 0; i < messageDialog.length; i++) {
    var message = messageDialog[i];
    var buttonOpen = messageDialogBtn[i];
    
    for (var i = 0; i < messageDialogBtnClose.length; i++) {
      var buttonClose = messageDialogBtnClose[i];
      buttonClose.onclick = function() {
        console.log(1);
        message.style.display = "none";
      };
    }

    buttonOpen.onclick = function(){
      message.style.display = "block";
    }

  }

  window.onclick = function(e){
    if(e.target == messageDialog){
      messageDialog.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;
}

.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);
	}
}