# Demo

Identifier: show purposes

Custom message

into: footer: submit: cancel:

# How to use

Default way

Add scripts in header

<head>
   ...
  <link rel="stylesheet" href="https://panda.sansiri.com/dist/css/styles.css" />
  <script src="https://panda.sansiri.com/dist/js/bundle.js"><script>
  <script>
    const option = {
      language: 'th', //en-us, th, zh-hant
      jsonUrl: '',
      showOption: 'false', //true, false
    }
    function callback(res) {
       alert(JSON.stringify(res))
    }
    function handleError(err) {
       alert(JSON.stringify(err))
    }
    const pandaShow = panda.modal.create(option, callback, handleError)
  <script>
   ...
</head>
Add function at where you need.

<body>
  ...
  <button onclick="pandaShow('[email protected]')" class="demo">Demo<button>
  ...
</body>

Show after create way

Add scripts
Modal will show after create.
   ...
  <link rel="stylesheet" href="https://panda.sansiri.com/dist/css/styles.css" />
  <script src="https://panda.sansiri.com/dist/js/bundle.js"><script>
  <script>
    const option = {
      language: 'th', //en-us, th, zh-hant
      jsonUrl: '',
      showOption: 'false', //true, false
    }
    function callback(res) {
       alert(JSON.stringify(res))
    }
    function handleError(err) {
       alert(JSON.stringify(err))
    }
    panda.modal.createAndShow(identifier, option, callback, handleError)
  <script>
   ...