smodal

index.js

import Smodal from "smodal";

var smodal = new Smodal({
    id: "modal",
    show: "showModal",
    hide: "hideModal"
});

index.html

<div id="modal">
  <div id="modalClose">
    <a id="hideModal">CLOSE</a>
  </div>
  <div id="modalTitle">
    タイトル
  </div>
  <div id="modalBody">
    本文
  </div>
</div>
<button id="showModal">OPEN</button>

<script src="./test.js"></script>

<style type="text/css">

@media only screen and (orientation:portrait) {
  #modal {
    width:100%;
    height:auto;
  }
}

@media only screen and (orientation:landscape) {
  #modal {
    width:90%;
    height:auto;
  }
}

#modal {
  display:none;
  margin:0;
  padding:0;
  background-color:#ffffff;
  color:#666666;
  position:fixed;
  z-index: 2;
}

#modalClose {
  text-align:right;
}
</style>