Twitter Bootstrap Alert Message Close and Open Again

Twitter Bootstrap alert message close and open again

Data-dismiss completely removes the element. Use jQuery's .hide() method instead.

The fix-it-quick method:

Using inline javascript to hide the element onclick like this:

<div class="alert" style="display: none"> 
    <a class="close" onclick="$('.alert').hide()">×</a>  
    <strong>Warning!</strong> Best check yo self, you're not looking too good.  
</div>

<a href="#" onclick="$('alert').show()">show</a>

http://jsfiddle.net/cQNFL/

This should however only be used if you are lazy (which is no good thing if you want an maintainable app).

The do-it-right method:

Create a new data attribute for hiding an element.

Javascript:

$(function(){
    $("[data-hide]").on("click", function(){
        $("." + $(this).attr("data-hide")).hide()
        // -or-, see below
        // $(this).closest("." + $(this).attr("data-hide")).hide()
    })
})

and then change data-dismiss to data-hide in the markup. Example at jsfiddle.

$("." + $(this).attr("data-hide")).hide()

This will hide all elements with the class specified in data-hide, i.e: data-hide="alert" will hide all elements with the alert class.

Xeon06 provided an alternative solution:

$(this).closest("." + $(this).attr("data-hide")).hide()

This will only hide the closest parent element. This is very useful if you don't want to give each alert a unique class. Please note that, however, you need to place the close button within the alert.

Definition of .closest from jquery doc:

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

My Bootstrap alert will not display after being closed

The Data-dismiss completley removes the element. You would need to hide the alert if you are intending on showing it again.

For example;

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
    <button type="button" class="close" data-hide="alert">×</button>
    @TempData["selCode"]
</div>

and this JS

$(function(){
    $("[data-hide]").on("click", function(){
        $(this).closest("." + $(this).attr("data-hide")).hide();
    });
});

Twitter Bootstrap alert message closes without pressing close button

It is probably do to the fact you are not calling the action that is opening it. So the page is refreshing.

If you are doing it inline:

onclick="$('#changeStatusMsg').show();return false;"

If with a click event

$(".foobar").on("click",function (event) {
    event.preventDefault();
    $("#changeStatusMsg').show();
});

How to Automatically Close Alerts using Twitter Bootstrap

Calling window.setTimeout(function, delay) will allow you to accomplish this. Here's an example that will automatically close the alert 2 seconds (or 2000 milliseconds) after it is displayed.

$(".alert-message").alert();
window.setTimeout(function() { $(".alert-message").alert('close'); }, 2000);

If you want to wrap it in a nifty function you could do this.

function createAutoClosingAlert(selector, delay) {
   var alert = $(selector).alert();
   window.setTimeout(function() { alert.alert('close') }, delay);
}

Then you could use it like so...

createAutoClosingAlert(".alert-message", 2000);

I am certain there are more elegant ways to accomplish this.

Dismissing alerts created using an event of twitter bootstrap

When you use the 'data-dismiss' attribute in your button, and close your button for the first time, the complete element disappears and you will not see the element again, until you reload/refresh the page. So remove the data-dismiss attribute, if you wish to see your alert pop-up repeatedly without page refresh.

Use jquery's hide() method to close the alert, rather than removing it completely from the Document Object Model.
Refer to this, Twitter Bootstrap alert message close and open again for the same problem.

For example -

<div class="alert alert-success fade in">
        <button type="button" class="close">×</button>
        <strong>Sucess!</strong> Values updated!!

The Javascript to close the button -

$('.close').click(function () {
    $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 
});

Alert is not working second time when clicking on button

Instead of writing whole code .I used slideUp() dealy() and slideDown() methods of Jquery.

$(document).ready(function() {  $("#success-alert").hide();  $("#btn2").click(function showAlert() {    $("#success-alert").slideDown(300).delay(2000).slideUp(400);  });});
$('#success-alert .close').click(function() {  $(this).parent().hide();});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="product-options">  <input type="button" id="btn2" value="Add to wish list" /></div><div class="alert alert-success" id="success-alert">  <button type="button" class="close" aria-label="Close">                <span aria-hidden="true">×</span>            </button>  <strong>Success! </strong> Product have added to your wishlist.</div>

Bootstrap Alert Auto Close

For a smooth slide-up:-

$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").slideUp(500);
});

---

$(document).ready(function() {
  $("#success-alert").hide();
  $("#myWish").click(function showAlert() {
    $("#success-alert").fadeTo(2000, 500).slideUp(500, function() {
      $("#success-alert").slideUp(500);
    });
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="product-options">
  <a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a>
  <a href="" class="btn btn-mini"> Purchase </a>
</div>
<div class="alert alert-success" id="success-alert">
  <button type="button" class="close" data-dismiss="alert">x</button>
  <strong>Success! </strong> Product have added to your wishlist.
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Bootstrap Alert wonts show again

This is my solution, you need to remove the data-dismiss attribute, and implement a hide function inside the close button.

The problem was data-dismiss was removing the element from the DOM completely!

$('#myform').on('submit', function(e) {  $('#messages').removeClass('hide').addClass('alert alert-success alert-dismissible').slideDown();  $('#messages_content').html('<h4 class="usefont" style="text-align: center">Thank you message!</h4>');  $('#modal').modal('show');  e.preventDefault();});
$('#close').on('click', function(e) {  $('#messages').removeClass('alert alert-success alert-dismissible').addClass('hide').slideUp().hide();  $('#messages_content').html('');  $('#modal').modal('show');  e.preventDefault();});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script><link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/><div id="messages" class="hide" role="alert">  <button type="button" id="hide" class="close" aria-label="Close"><span id="close">×</span></button>  <div id="messages_content"></div></div><form action="" id="myform">  <button type="submit">submit</button></form>

---

Related Topics