JSFiddle - React, Tailwind, and code Playground

by HelenStar

HTML

<div id="div1">
  <a name="modal" href="#k">Привет</a>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="k" class="modal">Пока</div>

CSS

#div1 {
  margin: 400px 0 0 500px;
}
.modal {
  display: none;
  width: 500px;
  height: 500px;
  background-color: blue;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

JavaScript

$(document).ready(function() {   
    $(('a[name=modal]')).click(function(e) {
    e.preventDefault();
    var id = $(this).attr('href');
    var x = $(this).offset();
    $(id).fadeIn(100);
    $(id).css('top', window.scrollY + 10 + 'px');
    }); 
})