'example of bootstrap alert triggered by button click

Using the Bootstrap framework, how can I trigger an alert with a button click?

I thought this would be straightforward, but I couldn't find any clear examples from the Bootstrap documentation: https://getbootstrap.com/docs/5.0/components/alerts/.

If you know basic javascript, this probably isn't hard, but for newbies like me it's helpful to have a simple example.

bootstrap-5

Solution 1:^[1]

Below is how I did it. I'm posting the full html with javascript, so it's easy to copy and paste, for example into https://www.w3schools.com/html/tryit.asp.

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, width=device-width">

        <!-- http://getbootstrap.com/docs/5.1/ -->
        <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet">
        <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <link href="/static/styles.css" rel="stylesheet">

    </head>

    <body>                      

<div class="container">
        <h3>Open an Alert by clicking this button</h3>
        <button id="alert-btn" class='btn btn-primary btn-lg mb-2'  data-target='#myalert' data-toggle='modal' data-copy="My arbitrary alert text string">Alert</button> 
        <div id="alert-container"></div>
</div>


<script>
    // Trigger button
    let button = document.querySelector("#alert-btn");

    // Alert container
    let container = document.querySelector("#alert-container");

    // Create click event listener on trigger button
    button.addEventListener("click", () => {

        // When user click on trigger #button, insert .alert element into #container
        container.innerHTML =
            `<div class="alert alert-success alert-dismissible fade show" role="alert">
                  Copied text to clipboard!
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>`
          ;
        var text = $(button).attr('data-copy');
        console.log("Debug:");
        console.log(text)
        var copyTextArea = document.createElement("textarea");
        copyTextArea.value = text;
        document.body.appendChild(copyTextArea);
        copyTextArea.select();
        try {
            var successful = document.execCommand('copy');
        } catch (err) {
            console.log("Ooops, unable to copy link");
        }
        document.body.removeChild(copyTextArea);
    });    
</script>


    </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Wells Wulsin

'example of bootstrap alert triggered by button click

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]