JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <div class="cover"></div>
  <div class="modal">
    <div class="modal_content">
      контент 1
    </div>
  </div>
  <button class="open-modal-btn">Кнопка 1</button>
</div>



<div id="wrapper2">
  <div class="cover2"></div>
  <div class="modal2">
    <div class="modal_content2">
      контент 2
    </div>
  </div>
  <button class="open-modal-btn2">Кнопка 2</button>
</div>

CSS

.cover {
  display: none;
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.8;
  z-index: 9999;
}

.modal {
  display: none;
  position: fixed;
  text-align: center;
  padding: 0 10%;
  z-index: 9999;
  width: 40%;
  height: auto;
  overflow: auto;
  margin: auto;
  position: fixed;
  top: 20%;
  left: 0;
  bottom: 0;
  right: 0;
}

.modal_content {
  display: none;
  min-width: 200px;
  width: 100%;
  position: relative;
  z-index: 9999;
  background: #d9c7a7;
  padding: 40px 0px 20px 0px;
}

.open-modal-btn {
  cursor: pointer;
}

.cover2 {
  display: none;
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.8;
  z-index: 9999;
}

.modal2 {
  display: none;
  position: fixed;
  text-align: center;
  padding: 0 10%;
  z-index: 9999;
  width: 40%;
  height: auto;
  overflow: auto;
  margin: auto;
  position: fixed;
  top: 20%;
  left: 0;
  bottom: 0;
  right: 0;
}

.modal_content2 {
  display: none;
  min-width: 200px;
  width: 100%;
  position: relative;
  z-index: 9999;
  background: #d9c7a7;
  padding: 40px 0px 20px 0px;
}

.open-modal-btn2 {
  cursor: pointer;
}

JavaScript

// open modal
var wrap = $('#wrapper, #wrapper2'),
  btn = $('.open-modal-btn, .open-modal-btn2'),
  modal = $('.cover, .modal, .modal_content, .cover2, .modal2, .modal_content2');

btn.on('click', function() {
  modal.fadeIn();
});

// close modal
$('.modal, .modal2').click(function() {
  wrap.on('click', function(event) {
    var select = $('.modal_content, .modal_content2');
    if ($(event.target).closest(select).length)
      return;
    modal.fadeOut();
    wrap.unbind('click');
  });
});