twitter-bootstrap closing alert does not work
I've sorted it out.
Instead of using a button, I'm now using a span, so the form doesn't get submitted:
<span class="close" data-dismiss="alert">×</span>
thanks for your help
twitter-bootstrap closing alert does not work
I've sorted it out.
Instead of using a button, I'm now using a span, so the form doesn't get submitted:
<span class="close" data-dismiss="alert">×</span>
thanks for your help
Alert dismissing using Twitter Bootstrap is not working?
Thanks to davidkonrad's comment.
The solution is trivial, by adding:
<script src="js/bootstrap.min.js"></script>
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.
Bootstrap dismissible alert not working
<div class="alert alert-warning alert-dismissible" role="alert">
<span type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></span>
<strong>Warning!</strong> Still on beta stage.
</div>
Twitter Bootstrap alerts does not gets close in the model
Please check the https://github.com/twitter/bootstrap/issues/838
or http://jsfiddle.net/thegreyjoy/yXswA/7/
We just need to change the class of the alert box when it is used in the model.
:)
Bootstrap alerts not closing
You still need to add Twitter Bootstrap core JS.
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<strong>Yay</strong> Your email has been added!
</div>
Bootstrap alert auto closing not working
$(this)
was changed inside the setTimeout
scope. Cache it in a variable. that
in my example.
$(function() {
var alert = $('div.alert[auto-close]');
alert.each(function() {
var that = $(this);
var time_period = that.attr('auto-close');
setTimeout(function() {
that.alert('close');
}, time_period);
});
});
WORKING SNIPPET:
$(function() {
var alert = $('div.alert[auto-close]');
alert.each(function() {
var that = $(this);
var time_period = that.attr('auto-close');
setTimeout(function() {
that.alert('close');
}, time_period);
});
});
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="moo" class="alert alert-danger alert-dismissible" role="alert" auto-close="3000">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
</button>
alert one
</div>
<div class="alert alert-success alert-dismissible" role="alert" auto-close="5000">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
</button>
alert two
</div>
Related Topics
Html: How to Force Links to Open in a New Tab, Not New Window
Why Does a Diamond with a Questionmark in It Appear in My HTML
When Does Whitespace Matter in HTML
How to Add Border to a Container with Transparent Gaps in Between
How to Indent Multiple Levels of Select Optgroup with CSS
@Font-Face Not Working on Mobile
What's the Difference Between HTML's and CSS's Width Attribute
Adding Http Request Header to a a Href Link
Remove Host Component Tag from HTML in Angular 4
How to Cut a Circular Part from an Image
Html/CSS Hack to Allow Overflow-X: Auto & Overflow-Y: Visible