<!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/5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />

  <script src="bsdialog5.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">
      <div class="col-6 border-right">

        <div class="pb-3 mb-3 border-bottom">
          <p><b>Example. Simple Text Modal</b></p>
          <p>Launch an empty modal</p>
          <div class="alert alert-secondary text-sm">
            <pre>
BSDialog5.Show({
  ID: "modalL1",
  Title: "Modal Title",
  Message: "Hello Momo!",
  URL: null,
  Size: "md",
  Colour: "secondary"
});
            </pre>
          </div>
          <p><button id="buttonL1" type="button" class="btn btn-primary">Launch Modal</button></p>
          <script>
            $(document).ready(function(){

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

            });
          </script>
        </div>


        <div class="pb-3 mb-3 border-bottom">
          <p><b>Example. Prompt Modal</b></p>
          <p>Launch a prompt modal and wait for a response</p>
          <div class="alert alert-secondary text-sm">
            <pre>
let response = await BSDialog5.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>
          <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 BSDialog5.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="pb-3 mb-3 border-bottom">
          <p><b>Example. Multiple Modals</b></p>
          <p>Launch multiple modals</p>
          <div class="alert alert-secondary text-sm">
            <pre>
BSDialog5.Show({
  ID: "modalL3a",
  Title: "Modal A Title",
  Message: "First!",
  URL: null,
  Size: "md",
  Colour: "secondary"
});

BSDialog5.Show({
  ID: "modalL3b",
  Title: "Modal B Title",
  Message: "Second!",
  URL: null,
  Size: "md",
  Colour: "secondary"
});
            </pre>
          </div>
          <p><button id="buttonL3" type="button" class="btn btn-primary">Launch Modal</button></p>
          <script>
            $(document).ready(function(){

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

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

            });
          </script>
        </div>


      </div>
      <div class="col-6">

        <div class="pb-3 mb-3 border-bottom">
          <p><b>Example. Text Modal with Updates</b></p>
          <p>Launch a basic modal, make updates to the title, body, size and footer.</p>
          <div class="alert alert-secondary text-sm">
            <pre>
BSDialog5.Show({
  ID: "modalR1",
  Title: "Modal Title",
  Message: "Hello Momo!",
  URL: null,
  Size: "md",
  Colour: "secondary"
});

BSDialog5.Update({
  ID: "modalR1",
  Title: "Modal Changed Title",
  Body: "Hello momo again!",
  BodyURL: null,
  Size: "lg",
  Footer: null
});
            </pre>
          </div>
          <p><button id="buttonR1" type="button" class="btn btn-primary">Launch Modal</button></p>
          <script>
            $(document).ready(function(){

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

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

            });
          </script>
        </div>


        <div class="pb-3 mb-3 border-bottom">
          <p><b>Example. Close Modal</b></p>
          <p>Close a modal using its identifier</p>
          <div class="alert alert-secondary text-sm">
            <pre>
BSDialog5.Close("modalR1");
            </pre>
          </div>
          <p><button id="buttonR2" type="button" class="btn btn-primary">Launch Modal</button></p>
          <script>
            $(document).ready(function(){

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

            });
          </script>
        </div>


        <div class="pb-3 mb-3 border-bottom">
          <p><b>Example. Clear Modal</b></p>
          <p>Close all modals</p>
          <div class="alert alert-secondary text-sm">
            <pre>
BSDialog5.Clear();
            </pre>
          </div>
          <p><button id="buttonR3" type="button" class="btn btn-primary">Launch Modal</button></p>
          <script>
            $(document).ready(function(){

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

            });
          </script>
        </div>


      </div>
    </div>

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