<!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>