JSFiddle - React, Tailwind, and code Playground

HTML

<div class="frame_pop" id="pop_base">
  <p class="btn_close">閉じる</p>
  <div class="inner_pop" id="pop_popup"> 
    <a href="https://www.google.co.jp/" id="pop_link" class="pop_link"><img src="https://placehold.jp/12/cc9999/993333/50x30.png">https://www.google.co.jp/</a>
</div>
 </div>

CSS

.frame_pop {
  width: 480px;
  height: 120px;
  margin: auto;
}
.inner_pop {
  width: 100%;
  overflow: hidden;
  background-color: #00BBFF;
}

.pop_link {
    background-color: red;
    display: block;
    height: 100%;
    margin-left: -100%;
    width: 100%;
}
.frame_pop.active a {
    margin-left: 0;
}
.frame_pop.active {
  background-color: #000;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
}
.frame_pop.active .inner_pop {
  background-position: center 40px;
  height: 100%;
}
.btn_close {
  display: none;
  max-width: 480px;
  text-align: right;
  margin: auto;
  height: 40px;
  cursor: pointer;
}
.active .btn_close {
  display: block;
}

img {
    vertical-align: bottom;
}

JavaScript

$(function () {
  'use strict';
  var btn = '#pop_link';
  var baseID = '#pop_base';
  var popID = '#pop_popup';
  var aTxt = 'active';

  $( popID ).click( function() {
    $( baseID ).addClass( aTxt );
  });
  $( baseID + ' .btn_close' ).click( function() {
	$( baseID ).removeClass( aTxt );
  });
});