cpq/preact-modal.html

## preact-modal.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>modal</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css" />
  </head>
  <body></body>
  <script type="module">
    import { h, render } from 'https://unpkg.com/preact@latest?module'
    import { useState, useEffect } from 'https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module'
    import { html } from 'https://unpkg.com/htm/preact/index.module.js?module'

    const Modal = function(props) {
      return html`
      <div class="d-block modal show" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Modal title</h5>
              <button type="button" class="btn-close" onclick=${props.hidemodal}></button>
            </div>
            <div class="modal-body">
              <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" onclick=${props.hidemodal}>Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>`;
    };

    const App = function(props) {
      const [count, setCount] = useState(0);
      const [showModal, setShowModal] = useState(false);
      const onclick = () => setCount(count + 1);
      const showmodal = () => setShowModal(true);
      const hidemodal = () => setShowModal(false);
      return html`
        <div class="m-5 bg-light">
          ${showModal ? h(Modal, {hidemodal}) : null}
          <div class="text-center display-2">${count}</div>
          <div class="my-4 d-flex">
            <button class="btn btn-block btn-info px-5 mx-5" onclick=${onclick}> click me </button>
            <button class="btn btn-block btn-info px-5 mx-5" onclick=${showmodal}> modal </button>
          </div>
        </div>`;
    };

    window.onload = () => render(h(App), document.body);
  </script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>modal</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css" />
	</head>
	<body></body>
	<script type="module">
	import { h, render } from 'https://unpkg.com/preact@latest?module'
	import { useState, useEffect } from 'https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module'
	import { html } from 'https://unpkg.com/htm/preact/index.module.js?module'

	const Modal = function(props) {
	return html`
	<div class="d-block modal show" tabindex="-1">
	<div class="modal-dialog">
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">Modal title</h5>
	<button type="button" class="btn-close" onclick=${props.hidemodal}></button>
	</div>
	<div class="modal-body">
	<p>Modal body text goes here.</p>
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-secondary" onclick=${props.hidemodal}>Close</button>
	<button type="button" class="btn btn-primary">Save changes</button>
	</div>
	</div>
	</div>
	</div>`;
	};

	const App = function(props) {
	const [count, setCount] = useState(0);
	const [showModal, setShowModal] = useState(false);
	const onclick = () => setCount(count + 1);
	const showmodal = () => setShowModal(true);
	const hidemodal = () => setShowModal(false);
	return html`
	<div class="m-5 bg-light">
	${showModal ? h(Modal, {hidemodal}) : null}
	<div class="text-center display-2">${count}</div>
	<div class="my-4 d-flex">
	<button class="btn btn-block btn-info px-5 mx-5" onclick=${onclick}> click me </button>
	<button class="btn btn-block btn-info px-5 mx-5" onclick=${showmodal}> modal </button>
	</div>
	</div>`;
	};

	window.onload = () => render(h(App), document.body);
	</script>
	</html>