<!doctype html>
<html lang="en-GB">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="content-type" content="text/html" charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="" />
  <meta name="keyword" content="" />

    <!-- jquery -->
  <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/jquery/3.7.0/dist/jquery.min.js"></script>
  <!-- bootstrap -->
  <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />

  <script src="bsdialog4.js"></script>
  <!-- <script src="bsdialog4.min.js"></script> -->
  <title></title>

  <style>

.text-sm {
  font-size: 0.8em;
}

  </style>


</head>
<body class="py-5">
  <div class="container">

    <div class="row mb-3 border-bottom">
      <div class="col-sm-4 border-right">
        <p><b>Example. Simple Text Modal</b></p>
        <p>Launch a modal with a text body.</p>

        <p><button id="buttonL1" type="button" class="btn btn-primary">Launch Modal</button></p>

        <script>
          $(document).ready(function(){

            $("#buttonL1").on('click', function(){
              BSDialog.Show({
                ID: "modalL1",
                Title: "Modal Title",
                Message: "Hello Momo!",
                URL: null,
                Size: "md",
                Colour: "secondary"
              });
            });

          });
        </script>

      </div>
      <div class="col-sm-8">

        <div class="alert alert-secondary text-sm">
<pre>BSDialog.Show({
  ID: "modalL1",
  Title: "Modal Title",
  Message: "Hello Momo!",
  URL: null,
  Size: "md",
  Colour: "secondary"
});</pre>
        </div>

      </div>
    </div>

    <div class="row mb-3 border-bottom">
      <div class="col-sm-4 border-right">

        <p><b>Example. Update Modal</b></p>
        <p>Make changes (title, body, size or footer) to a modal.</p>

        <p><button id="buttonR1" type="button" class="btn btn-primary">Launch Modal</button></p>
        <script>
          $(document).ready(function(){

            $("#buttonR1").on('click', function(){
              BSDialog.Show({
                ID: "modalR1",
                Title: "Modal Title",
                Message: "Hello Momo!",
                URL: null,
                Size: "md",
                Colour: "secondary"
              });

              BSDialog.Update({
                ID: "modalR1",
                Title: "Modal Changed Title",
                Body: "Hello momo again!",
                URL: null,
                Size: "lg",
                Footer: null
              });
            });

          });
        </script>
      </div>
      <div class="col-sm-8">

        <div class="alert alert-secondary text-sm">
<pre>BSDialog.Update({
  ID: "modalL1",
  Title: "Modal Changed Title",
  Body: "Hello momo again!",
  URL: null,
  Size: "lg",
  Footer: null
});</pre>
        </div>

      </div>
    </div>

    <div class="row mb-3 border-bottom">
      <div class="col-sm-4 border-right">

        <p><b>Example. Multiple Modals (Stack)</b></p>
        <p>Launch multiple modals, stacked on top of each other.</p>

        <p><button id="buttonL3" type="button" class="btn btn-primary">Launch Modal</button></p>
        <script>
          $(document).ready(function(){

            $("#buttonL3").on('click', function(){
              BSDialog.Show({
                ID: "modalL3a",
                Title: "Modal A Title",
                Message: "First!",
                URL: null,
                Size: "md",
                Colour: "secondary"
              });

              BSDialog.Show({
                ID: "modalL3b",
                Title: "Modal B Title",
                Message: "Second!",
                URL: null,
                Size: "md",
                Colour: "secondary"
              });
            });

          });
        </script>

      </div>
      <div class="col-sm-8">
        <div class="alert alert-secondary text-sm">
<pre>BSDialog.Show({
  ID: "modalL3a",
  Title: "Modal A Title",
  Message: "First!",
  URL: null,
  Size: "md",
  Colour: "secondary"
});

BSDialog.Show({
  ID: "modalL3b",
  Title: "Modal B Title",
  Message: "Second!",
  URL: null,
  Size: "md",
  Colour: "secondary"
});</pre>
        </div>
      </div>
    </div>

    <div class="row mb-3 border-bottom">
      <div class="col-sm-4 border-right">

        <p><b>Example. Button Prompt (Modal)</b></p>
        <p>Launch a modal with a prompt of several buttons. Modal waits for a response from one of the buttons.</p>

        <p><button id="buttonL2" type="button" class="btn btn-primary">Launch Modal</button></p>
        <script>
          $(document).ready(function(){

            $("#buttonL2").on('click', async function(){
              let response = await BSDialog.Prompt({
                Title: "Modal Title",
                Message: "Are you sure want to wait for a response?",
                Size: "md",
                Buttons: [
                  { Label: "Yes", Value: "Yes", Colour: "primary" },
                  { Label: "No", Value: "No", Colour: "secondary" },
                  { Label: "Cancel", Value: "Cancel", Colour: "secondary" }
                ]
              });

              alert(response);
            });

          });
        </script>
      </div>
      <div class="col-sm-8">
        <div class="alert alert-secondary text-sm">
<pre>let response = await BSDialog.Prompt({
  Title: "Modal Title",
  Message: "Are you sure want to wait for a response?",
  Size: "md",
  Buttons: [
    { Label: "Yes", Value: "Yes", Colour: "primary" },
    { Label: "No", Value: "No", Colour: "secondary" },
    { Label: "Cancel", Value: "Cancel", Colour: "secondary" }
  ]
});

alert(response);</pre>
        </div>
      </div>
    </div>

    <div class="row mb-3 border-bottom">
      <div class="col-sm-4 border-right">

        <p><b>Example. Text Prompt (Modal)</b></p>
        <p>Launch a modal with a text prompt. Modal waits for a response from the textbox.</p>

        <p><button id="buttonL2a" type="button" class="btn btn-primary">Launch Modal</button></p>
        <script>
          $(document).ready(function(){

            $("#buttonL2a").on('click', async function(){
              let response = await BSDialog.Prompt({
                Type: "textbox",
                Title: "Modal Title",
                Message: "Are you sure want to wait for a response?",
                Size: "md",
                Label: "",
                Placeholder: ""
              });

              alert(response);
            });

          });
        </script>
      </div>
      <div class="col-sm-8">
        <div class="alert alert-secondary text-sm">
<pre>let response = await BSDialog.Prompt({
  Type: "textbox",
  Title: "Modal Title",
  Message: "Are you sure want to wait for a response?",
  Size: "md",
  Label: "",
  Placeholder: ""
});

alert(response);</pre>
        </div>
      </div>
    </div>

    <div class="row mb-3 border-bottom">
      <div class="col-sm-4 border-right">

        <p><b>Example. Close Modal</b></p>
        <p>Close a modal using its identifier</p>
        <p><button id="buttonR2" type="button" class="btn btn-primary">Launch Modal</button></p>
        <script>
          $(document).ready(function(){

            $("#buttonR2").on('click', function(){
              BSDialog.Close("modalR1");
            });

          });
        </script>

      </div>
      <div class="col-sm-8">
        <div class="alert alert-secondary text-sm">
<pre>BSDialog.Close("modalR1");</pre>
        </div>
      </div>
    </div>

    <div class="row mb-3 border-bottom">
      <div class="col-sm-4 border-right">

        <p><b>Example. Clear Modal</b></p>
        <p>Close all modals</p>
        <p><button id="buttonR3" type="button" class="btn btn-primary">Launch Modal</button></p>
        <script>
          $(document).ready(function(){

            $("#buttonR3").on('click', function(){
              BSDialog.Clear();
            });

          });
        </script>

      </div>
      <div class="col-sm-8">
        <div class="alert alert-secondary text-sm">
<pre>BSDialog.Clear();</pre>
        </div>
      </div>
    </div>

  </div>
</body>
</html>