<!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 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(){ BSDialog5.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>BSDialog5.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(){ 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!", URL: null, Size: "lg", Footer: null }); }); }); </script> </div> <div class="col-sm-8"> <div class="alert alert-secondary text-sm"> <pre>BSDialog5.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(){ 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 class="col-sm-8"> <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> </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 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="col-sm-8"> <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> </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 BSDialog5.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 BSDialog5.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(){ BSDialog5.Close("modalR1"); }); }); </script> </div> <div class="col-sm-8"> <div class="alert alert-secondary text-sm"> <pre>BSDialog5.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(){ BSDialog5.Clear(); }); }); </script> </div> <div class="col-sm-8"> <div class="alert alert-secondary text-sm"> <pre>BSDialog5.Clear();</pre> </div> </div> </div> </div> </body> </html>