JSFiddle - React, Tailwind, and code Playground

by KEN73CHEN

HTML

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<button class="w3-button w3-green w3-large" id="login">Login</button>
<div class="w3-modal w3-lightgray" id="id01">
  <div class="w3-modal-content w3-card-4 w3-animate-zoom w3-padding">
    <h1>Login Form</h1>
    <button class='w3-button w3-large w3-gray w3-section' id='loginCancel'>
      取消
    </button>
  </div>
</div>

CSS

body {
  height: 300px;
}

JavaScript

document.id('login').addEvent('click', function(event) {　　
  document.id('id01').setStyle('display', 'block');　
});　
document.id('loginCancel').addEvent('click', function(event) {　　
  document.id('id01').setStyle('display', 'none');　
});