Show Bootstrap Alert on Button Click via JavascriptjQuery - Stack Overflow

admin管理员组

文章数量:1315792

I've referenced some other questions on here about showing and hiding a Bootstrap Alert on button click, but for some reason my implementation is not working. I am using Bootstrap 4, however, although from my beginner knowledge things should still work correctly.

I've referenced Bootstrap's documentation on dismissing alerts, and I have modified their sample to remove the show class from the alert as I simply want to show the alert upon a button click. The dismissal should work fine as the close button on the alert will be implemented from the HTML.

HTML

<!-- Alert -->
<div class="alert alert-success alert-dismissible fade" role="alert" id="buttonAlert">
    <strong>Success!</strong> You just showed an alert.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<!-- Submit Button -->
<div class="form-group">
    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#ModalCenter" id="modalButton">Click me</a>
    </div>
</div>

JavaScript

  $(document).ready(function() {
      $("#modalButton").click(function(){
          // alert("Success!") //Test to see if the function worked, it did
      $("#buttonAlert").show() //Shows Bootstrap alert
      })
  })

So the JavaScript function works as I've tested it with alert("Success!"), but the Bootstrap alert line $("#buttonAlert").show() does not show anything?

Note I am brand new to Bootstrap and Javascript/Jquery, I'm just trying to put some sample code together to learn so please bear with me.

I've referenced some other questions on here about showing and hiding a Bootstrap Alert on button click, but for some reason my implementation is not working. I am using Bootstrap 4, however, although from my beginner knowledge things should still work correctly.

I've referenced Bootstrap's documentation on dismissing alerts, and I have modified their sample to remove the show class from the alert as I simply want to show the alert upon a button click. The dismissal should work fine as the close button on the alert will be implemented from the HTML.

HTML

<!-- Alert -->
<div class="alert alert-success alert-dismissible fade" role="alert" id="buttonAlert">
    <strong>Success!</strong> You just showed an alert.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<!-- Submit Button -->
<div class="form-group">
    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#ModalCenter" id="modalButton">Click me</a>
    </div>
</div>

JavaScript

  $(document).ready(function() {
      $("#modalButton").click(function(){
          // alert("Success!") //Test to see if the function worked, it did
      $("#buttonAlert").show() //Shows Bootstrap alert
      })
  })

So the JavaScript function works as I've tested it with alert("Success!"), but the Bootstrap alert line $("#buttonAlert").show() does not show anything?

Note I am brand new to Bootstrap and Javascript/Jquery, I'm just trying to put some sample code together to learn so please bear with me.

• javascript
• jquery
• twitter-bootstrap
• bootstrap-4
• jquery-events

Share Improve this question Follow edited Aug 7, 2019 at 13:42 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 13, 2018 at 20:20 MatthewMatthew 4,0561717 gold badges7070 silver badges132132 bronze badges 4

• what version of the popper.js you are including with bootstrap? – Muhammad Omer Aslam Commented Feb 13, 2018 at 20:29
• Hi. I recopied my code above. I accidentally left that out of my original post, but the `id="buttonAlert" is in fact in my HTML. I also included the button HTML for reference. Still not working? I have all of the necessary Bootstrap file included as well. – Matthew Commented Feb 13, 2018 at 20:30
• @MuhammadOmerAslam Popper.js is from src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js directly from Bootstrap's Getting Started docs here getbootstrap./docs/4.0/getting-started/introduction – Matthew Commented Feb 13, 2018 at 20:32
• looks like you are doing something wrong while including the libraries you should add the relevant sections like the files you are including and in the same order as they are loading at your end to regenerate the issue – Muhammad Omer Aslam Commented Feb 13, 2018 at 20:35

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You don't have anything called "buttonAlert". Give the alert an id="buttonAlert"

    <div class="alert alert-success alert-dismissible fade" role="alert" id="buttonAlert">
          <strong>Success!</strong> You just showed an alert.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
   </div>

Also, jQuery show() won't work. You need to user addClass('show')...

$("#modalButton").click(function(){
      $("#buttonAlert").addClass('show') 
})

https://www.codeply./go/57smFfXNh0

I am not sure which one is the issue, I guess that the way JQuery handles show and hide is different from bootstrap show and hide.

But you can hide the success message by using Jquery $("#buttonAlert").hide() and then showing it with $("#buttonAlert").show();

$(document).ready(function() {
  $("#buttonAlert").hide()
  $("#modalButton").click(function() {
    $("#buttonAlert").show()
  })
})

<link href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Test page</title>
</head>

<body>
  <!-- Alert -->
  <div class="alert" role="alert" id="buttonAlert">
    <strong>Success!</strong> You just showed an alert.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
  </div>

  <!-- Submit Button -->
  <div class="form-group">
    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#ModalCenter" id="modalButton">Click me</a>
  </div>
</body>

</html>

If you want it fully dynamic and can use the new templating in JS, you could do something like this if you had a div with id of "notification". I just pass in message hard-code "Success" for the title, but you could change that if you'd like.

The css for it is like this:

#notification {
    position: fixed;
    right: 20px;
    top: 50px;
    width: 400px;
    z-index: 999999;
}

JS Code:

const handleToastOpenAndClose = ($alert, autoCloseDelay) => {
    $alert.fadeIn();

    const fadeCall = fadingEvent => fadingEvent.slideUp(500, () => $alert.slideUp(500, () => $alert.alert('close')));
    if (autoCloseDelay) {
        var fadingEvent = $alert.fadeTo(autoCloseDelay, 500, () => fadeCall(fadingEvent));
        $alert.hover(
            () => fadingEvent.stop(),
            () => fadingEvent = $alert.fadeTo(autoCloseDelay, 500, () => fadeCall(fadingEvent))
        );
    }
};

window.toastSuccess = (message, autoCloseDelay) => {
    var html = `<div class="alert alert-success alert-dismissible hidden" role="alert">
            <div><strong>Success</strong></div>
            ${message}
            <button class="close" type="button" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">x</span>
            </button>
       </div>`;

    $('#notification').append(html);
    var $alert = $("#notification .alert:last");
    handleToastOpenAndClose($alert, autoCloseDelay);
};

Try this:

html:
<div class="alert d-none" id="alert_box">

js:
const alertbox = document.querySelector("#alert_box");

alertbox.classList.remove('d-none'); //Remove hidden class
alertbox.classList.add('alert-danger'); //Chance red color
setTimeout(function() {alertbox.classList.add('d-none')}, 3000); //Close it 3 secs later, and can be reused again with the same code

本文标签： Show Bootstrap Alert on Button Click via JavascriptjQueryStack Overflow