Show Bootstrap alert box on a button click

javascript jquery asp.net-mvc twitter-bootstrap twitter-bootstrap-3

109,021

Solution 1

This jsfiddle shows how you can show a bootstrap alert box on click

You need to implement jquery's show() method. The code you need to use is.

$(document).ready(function(){
    $('button').click(function(){
        $('.alert').show()
    }) 
});

Solution 2

function showAlert(){
  if($("#myAlert").find("div#myAlert2").length==0){
    $("#myAlert").append("<div class='alert alert-success alert-dismissable' id='myAlert2'> <button type='button' class='close' data-dismiss='alert'  aria-hidden='true'>&times;</button> Success! message sent successfully.</div>");
  }
  $("#myAlert").css("display", "");
}

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

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

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<button value="showAlert" onclick="showAlert();"> Show Alert</button>

    <div class="container" style="display:none;" id="myAlert">
        <h2>Dismissal Alert Messages</h2>
        <div class="alert alert-success alert-dismissable" id="myAlert2">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            Success! message sent successfully.
        </div>

    </div>

Edited

I've added some IDs and written some code. Try to understand, If you are not getting ask me. Okay Hope this will help for you, If not ask me for more.

Solution 3

Try This. What is done here is:

Added one button "Show Alert message".
By Default alert message will be hidden.
On click of "Show alert message" alert message will be shown

$("#btnShow").click(function(){
  
  $(".alert").hide().show('medium');
});

.alert{
  display:none;
}

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

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

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="container">
      
        <h2>Dismissal Alert Messages</h2>
      
      <button id="btnShow">Show Alert message</button>
        <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            Success! message sent successfully.
        </div>

    </div>
</body>

Solution 4

You can check this one:

 <div class="container">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="alert alert-success alert-dismissible">
            <a  class="close" data-dismiss="modal" aria-label="close">&times;</a>
            <strong>Success!</strong> Indicates a successful or positive action.
          </div>
    </div>
  </div>
</div>

Solution 5

If you want to create custom modal dialog box, then you could use this small library for it: http://bootboxjs.com/

<!-- bootbox code -->
    <script src="bootbox.min.js"></script>
    <script>
        $(document).on("click", ".alert", function(e) {
            bootbox.alert("Hello world!", function() {
                console.log("Alert Callback");
            });
        });
    </script>

Otherwise you need to create the modal and javascript triggers manually.

View more solutions

109,021

Author by

Neo

Hi! I'm a software engineer. Having experience to work on C#,Asp.Net,AJAX,SQL 2005/08/2012,EF4,SQL to LINQ and also worked on Cloud Computing (Microsoft Windows Azure and AWS Amazon).

Updated on July 05, 2022

Comments

Neo almost 2 years

The following code shows an alert box:

<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <h2>Dismissal Alert Messages</h2>
        <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            Success! message sent successfully.
        </div>
    </div>
</body>

I want to show alert box on button click , can anyone help me to do so?

Neo about 9 years

custom but using my above code , can you help me to modify it ?
Neo about 9 years

when I used it second time it is not working :( it works only after page refresh
Paul Fitzgerald about 9 years

ah ok, let me fix that @Neo. can you confirm that every time you click the button you want a new alert box to appear
Neo about 9 years

when I clicked button second time it is not working :( it works only after page refresh
Neo about 9 years

when I clicked button second time it is not working :( it works only after page refresh
Neo about 9 years

yes actually i will use it and generate alerts dynamically..on success and failure I will show a alert message.
Paul Fitzgerald about 9 years

@Neo hey, try this, it works as you asked (I hope) jsfiddle.net/uxzobhen/2 changed it slightly again, I think this works best. let me know
Paul Fitzgerald about 9 years

nice, I like this solution @Puneet
saikiran.vsk about 9 years

I've updated, check it now the alert will come, second time, third time ... all the time.Okay
WAQ over 6 years

@PaulFitzgerald clicking the button every times adds new message which is not idea. just add $('.parent').empty(); before appending alert div to the parent fixes the issue.
Er. Amit Joshi over 5 years

nice one is it available with alert in bootstrap 4
zshanabek about 5 years

After clicking close button the message is not shown again
serge about 3 years

it says that the alert is removed from dom