1047352

by ostapische

HTML

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2 lang="ru">post.title 1</h2>
      <p lang="ru">post.body 1</p>
      <button class="myBtn" data-id="1">Open Modal</button>
      <div class="modal" data-id="1">
        <div class="modal-content">
          <span class="close" data-id="1">&times;</span>
          <p>post.translation 1</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2 lang="ru">post.title 2</h2>
      <p lang="ru">post.body 2</p>
      <button class="myBtn" data-id="2">Open Modal</button>
      <div class="modal" data-id="2">
        <div class="modal-content">
          <span class="close" data-id="2">&times;</span>
          <p>post.translation</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

div.modal {
  display: none;
}

JavaScript

var btns = document.getElementsByClassName( "myBtn" );
var spans = document.getElementsByClassName( "close" );
for ( var i = 0; i < btns.length; i++ ) {
	var btn = btns[ i ];
  btn.onclick = function (event) {
    var modal = document.querySelector( "div.modal[data-id=\"" + this.dataset.id + "\"]" );
    modal.style.display = "block";
    modal.classList.add( "visible" );
  };
}
for ( var i = 0; i < spans.length; i++ ) {
	var span = spans[ i ];
  span.onclick = function (event) {
    var modal = document.querySelector( "div.modal[data-id=\"" + this.dataset.id + "\"]" );
    modal.style.display = "none";
    modal.classList.remove( "visible" );
  };
}