JSFiddle - React, Tailwind, and code Playground

by asou ryouma

HTML

<p class="button">モーダルウィンドウを開く</p>
<div id="bg">
<div id="modal">開きました！<span>閉じる</span></div>
</div>

CSS

.button{
  width:200px;
  padding: 20px;
  margin:0 auto;
  background-color:#fff;
  text-align:center;
  font-weight:bold;
  cursor:pointer;
}

#bg{
    padding: 10px;
    background-color: rgba(0,0,0,0.5);
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    display:none;
}

#modal{
   width:500px;
  margin:0 auto;
  padding: 50px;
  background-color:#fff;
  text-align:center;
  position: relative;
  border: solid: 1px #ccc;
}

#modal span{
  position: absolute;
  right: 0;
  top: 0;
  cursor:pointer;
}

JavaScript

$(function(){
  function modal(x,y,z){
   $(x).on("click",function(){
     $(y).css({"display":z});
   });
   $("#modal").on("click",function(event){
     event.stopPropagation();
   });
  };
  modal(".button","#bg","block");
  modal("#modal span,#bg","#bg","none");
});