My bootstrap alerts are not working with CSS animation class fadeout. As mentioned in BS documentation closed.bs.alert does: This event is fired when the alert has been closed (will wait for CSS transitions to complete).
But I want to fade and sildeUp the alert.
JavaScript
$('.alert').each(function(index, el) {
$(this).on('closed.bs.alert', function(){
$(this).addClass('animated fadeOut')
})
});
Can I use jQuery fadeOut method and slideUp to do the work?
HTML
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p><i class="fa fa-check"></i> <strong>Success Message ! </strong>You have successfully registered</p>
</div>
You need to
bind event at close.bs.alert
remove bootstrap animation and use your own
please see code below.
// bind event at 'close.bs.alert'
$('.alert').on('close.bs.alert', function(e) {
// stop Bootstrap animation
e.stopPropagation();
// Use my own animation
$(this).closest('.alert')
.animate({
height: 'toggle',
opacity: 'toggle'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="alert alert-success fade in">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p><i class="fa fa-check"></i> <strong>Success Message ! </strong>You have successfully registered</p>
</div>
</div>
</div>
</div>
Related
I am working with toasts in Bootstrap 4 and there is one things that's bothering me:
If I initialize the toast
<div class="toast my-3" data-delay="2500">
<div class="toast-header text-dark">
//fill this later
</div>
<div class="toast-body text-dark">
//fill this later
</div>
</div>
like in the documentation
$(document).ready(function () {
$(".toast").toast("show");
});
the toast is show as expected, when the page loads. If I don't initialize the toast, the html code takes some place. at the bottom of my page.
How can I make the toast not to be shown when loading the page and not taking some place due to html code? I tried initialize them with toast("hide") or toast("dispose") as well.
Thanks
When you write this:
$(document).ready(function () {
$(".toast").toast("show");
});
It means you're expecting the toast to show as soon as the DOM is loaded. If you want the toast to appear conditionnally, you have for example to create a button in your html file (click on "Run snippet" and click on the button).
$(document).ready(function () {
$('#toastThis').on( "click", function() {
$(".toast").toast("show");
});
});
.toast {
position: absolute;
top: 0;
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" id="toastThis" class="btn btn-primary">Primary</button>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
I have a piece of code that will create a contextual menu on right-click on one input in my page. The code is supposed to add "{Keyword: }" to the input. The problem is when I add the JS below all the modals that I use stop working (not displaying). The modals are activated by a button click.
Contexctual menu HTML:
<div id='cntnr'>
<ul id='items'>
<li>{Keyword:fallback}</li>
<li>{KeyWord:fallback}</li>
</ul>
</div>
Contexctual menu JS:
$("#headline11").on("contextmenu",function(e){
e.preventDefault();
$("#cntnr").css({"left": e.pageX-3, "top": e.pageY-3});
$("#cntnr").fadeIn(200, startFocusOut);
});
function startFocusOut(){
$(document).on("click",function(){
$("#cntnr").hide();
$(document).off("click");
});
}
$("#items > li").click(function(){
$("#headline11").val($(this).text().replace("fallback", " "));
var input1 = document.getElementById("headline11");
setInputSelection(input1, 9, 10);
});
Button:
<button onclick="load();setTimeout(myFunction, 10)" class="myBtn1" data-toggle="modal" data-target="#build">1 - Create campaign</button>
The modal:
<div class="container">
<!-- Modal Preview-->
<div class="modal fade" id="build" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">Your Campaign Preview1</h4>
</div>
<div class="modal-body">
<div id="hoursSaved"></div>
Some text here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
When I use {Keyword: Whatever here} in my input and submit, the modals stop working, but when I remove the JS above everything works, except the contextual menu of course.
It took me hours to debug my code and find what part of it is causing the problem, but I'm unable to understand why. Your help will be much appreciated.
Thank you,
EDIT: Here is a JsFiddle as requested in the comments. You'll have to run the code between each test to see the difference.
https://jsfiddle.net/yagami889/xpvt214o/470697/
You'll have to use the contextual menu to add the {Keyword:} you can enter whatever you want after ":", it won't work if you past it.
I found the answer. I had to use:
function startFocusOut(){
$("#cntnr").on("click",function(){
$("#cntnr").hide();
$("#cntnr").off("click");
});
}
Instead of:
function startFocusOut(){
$(document).on("click",function(){
$("#cntnr").hide();
$(document).off("click");
});
}
I have a code that what I wanted to do is to close the modal on ajax success. This is my code:
script
success: function() {
console.log("delete success");
$('#deleteContactModal').modal('hide');
$( "#loadContacts" ).load( "/main/loadContacts" );
}
html
<div class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<!--everything goes here -->
</div>
</div>
</div>
Everything just works except when the code $('#deleteContactModal').modal('hide'); triggers, it just shows a black faded screen like this:
The modal closes but the black faded color is still present. Am I missing something here? Thank you in advance.
I'm using bootstrap 3.3.
try to add this attribute with your modal div aria-hidden="true"
eg:
<div aria-hidden="true" class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
Here is my working example
<div class="modal fade" id="copy_course_modal" tabindex="-1" role="dialog" aria-labelledby="copycourse" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="purchaseLabel">Copy Chapter</h4>
</div>
<div class="modal-body">
Modal body content here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="saveCopiedCourse()">Copy Course</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and on success doing same.
$("#copy_course_modal").modal('hide');
I have the same exact problem and the only way I could find to work is to individually remove the parts of the modal is generating. Just put this function in yous js and make an onclick event at your button in your html or js. Hope I helped.
function hideModal(){
$(".modal").removeClass("in");
$(".modal-backdrop").remove();
$('body').removeClass('modal-open');
$('body').css('padding-right', '');
$(".modal").hide();
}
Try:
$(".modal.in").modal("hide");
This will hide the currently active modal.
Ran into this issue myself in a similar situation.
It seems to be related to the asynchronous nature of javascript + bootstrap animations.
It's a dirty, dirty hack, but wrapping the call to 'hide' in a timeout made it work for me:
setTimeout( function(){$("#myModal").modal('hide')}, 300 );
If employing this "solution" to the problem, you may need to adjust the timeout value. Bootstrap animations seem to take around 125 - 200 ms, so 300 provides a nice safety buffer.
$('#deleteContactModal').modal('hide')
Find this link
https://getbootstrap.com/docs/3.3/javascript/#modal-hide
It gives detail https://getbootstrap.com/docs/3.3/javascript/#modal-hide regarding model window
Simple programmatically click close button of dialog.
$("button[data-dismiss=\"modal\"]").click();
This will automatically close dialog.
This issue will solve by hiding individual elements of modal.
Such as :
$("#modal").modal('hide');
$('body').removeClass('modal-open');
$(".modal-backdrop").remove();
I tried several of the proposed solutions and the only one that worked for me was:
$(".modal.in").modal('hide');
Some did clear the modal and the backdrop but then it did not redisplay on
subsequent invocations.
$.ajax({
type: "POST",
url: "admin/pc-item-insert.php",
data: $(this).serialize(),
success: function(data) {
$("#showinfo").html(data);
$(".modal").modal("hide");
},
});
This is just a timing problem. The Fade animation takes time and javascript cant close it. just cancel the fade animation and it works properly!
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
...
</div>
(Not use class="modal fade", jus class="modal")
None of these options worked for me apart from the one that said don't use modal fade. However I wanted to use modal fade. My code was making an ajax call to save changes, and then on success was doing this:
$('#myModal').modal('hide');
doRefresh();
The problem was doRefresh was then updating the page under the modal. If I removed the doRefresh, it worked. So what I ended up doing was this:
$('#myModal').modal('hide');
setTimeout(doRefresh, 500);
To clear the backdrop
$(".modal-backdrop").toggleClass("hide, show");
tested in bs4
I define my modal :
<div class="modal fade" aria-hidden="true" role="dialog" id="modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button id="btnCloseModal" hidden type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Waiting</strong>
</div>
<div class="modal-content">
<div>
Please don't close your tab!
</div>
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<div class="modal-footer">
<strong>Loading...</strong>
</div>
</div>
</div>
</div>
then I create function :
var StopLoadingAnimation = function () {
$('#modal').on('show.bs.modal', function (e) {
console.log("trigger show");
$("#btnCloseModal").trigger("click");
});
$('#modal').on('shown.bs.modal', function (e) {
console.log("trigger");
$("#btnCloseModal").trigger("click");
});
$('#modal').on('hidden.bs.modal', function (e) {
console.log("event");
$(e.currentTarget).off('shown');
$(e.currentTarget).off('show');
});
$("#btnCloseModal").trigger("click");
}
My idea is after ajax success is will call function StopLoadingAnimation what will trigger event click on element btnCloseModal ( It like you click button btnCloseModal when you closing modal )
Do anyone know how to make bootstrap modal window pop-up after 5sec ?
I had done a Modal Window with auto pop up but I wish it's pop up delay 5 sec .
can anyone help ?
thanks for help .
here my code .
<div class="modal fade in" id="formSaludo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5><strong>給我們一個小小的贊吧～我們會帶給你更多的趣事，新聞，最新動態！您的一個贊給我們帶來無限的力量！</strong></h5>
<img class="img-responsive center-block " src="funnylike.jpg">
</div>
<div class="modal-body">
<div class="fb-like" data-href="https://www.facebook.com/cloudsblacks" data-width="200" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div> </div>
<div class="modal-footer">
<a class="btn btn-link" data-dismiss="modal" style="font-size:15px;color:#808080;cursor: pointer;text-decoration: none;">已經讚了,请稍等...</a>
</div>
</div>
</div>
</div>
<!-- Modal Window -->
<script type="text/javascript">
$(window).load(function(){
$('#formSaludo').modal('show');
});
</script>
Use setTimeout() function
$(window).load(function(){
setTimeout(function(){ $('#formSaludo').modal('show'); }, 5000);
});
You will want to do something like this
var show = function(){
$('#formSaludo').modal('show');
};
$(window).load(function(){
var timer = window.setTimeout(show,5000);
});
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout
Try this:
$('#formSaludo').delay(5000).modal('show');
EDIT:
I'm not sure if the delay function will work in this case. You can always use setTimeout like others have suggested.
Try This Code
setTimeout(function(){
$('#formSaludo').modal(); },
5000);
Hope it will be work.
So, I am using bootstrap's modal.
I want to make a wizard style modal and came up with the following solution:
div snippets:
<div class="modal-instance hide fade" id="step1">
<div id="stepa">
...
</div>
</div>
<div id="stepb" style="display: none;">
...
</div>
Upon pressing a button in step-a step-b is loaded.
javascript snippet:
$("#stepa").replaceWith($('#stepb'));
document.getElementById('stepb').style.display = 'block';
This works ok.
But when I dismiss the modal. The div stepa has still been replaced by stepb. My solution was to build a replacement back to stepa when the modal is hidden:
$("#myModal").on("hidden", function() {
//replace the child
});
I tried:
$('#step1').children().remove();
$('#step1').append($('#stepa'));
and
$("#step1").children("div:first").replaceWith($('#stepa'));
But I am having a hardtime selecting step-a as a replacement div, probably due to it not being a separate div. My question is, is this the right approach for a wizard styled modal or should I take another approach?
It's much simpler just to hide the previous and next steps, instead of copying them.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div id="myModal" class="modal hide fade" data-step="1">
<div class="step step1">
<h1>Step 1</h1>
<button class="btn next">Next</button>
</div>
<div class="step step2">
<h1>Step 2</h1>
<button class="btn previous">Previous</button>
<button class="btn next">Next</button>
</div>
<div class="step step3">
<h1>Step 3</h1>
<button class="btn previous">Previous</button>
<button class="btn done" data-dismiss="modal">Done</button>
</div>
</div>
<style type="text/css">
#myModal > .step { display: none; }
</style>
<script type="text/javascript">
$(function() {
showStep(parseInt($('#myModal').data('step')) || 1);
$('#myModal .next').on('click', function () {
showStep(parseInt($('#myModal').data('step')) + 1);
});
$('#myModal .previous').on('click', function () {
showStep(parseInt($('#myModal').data('step')) - 1);
});
$('#myModal').on('hidden', function() {
showStep(1);
});
function showStep(step) {
$('#myModal').data('step', step);
$('#myModal > .step').hide();
$('#myModal > .step' + step).show();
}
});
</script>
http://jsfiddle.net/7kg7z/5/