I have a gif image which spins in circle. I put that in the bootstrap modal. It is my progress bar. I would like the modal to appear for about 5 seconds and then it will close itself. Here's my code:
<?php
function progressBar($total){
sleep($total);
return "modal";
}
?>
<!-- Modal ProgressBar -->
<div class="modal fade" id="progressBarCenter" tabindex="-1" role="dialog" aria-labelledby="progressBarCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="progressBarLongTitle">Your Script Is Executing...</h5>
<button type="button" class="close" data-dismiss=<?php progressBar(5); ?> aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="webapps/images/progressBar.gif">
</div>
</div>
</div>
</div>
It sort of work. As in, it sleeps for 5 seconds then it loads the whole page. Not what I want at all. A user would click on a button to startup the modal, no problem there. Once it is active, it need to sleep for 5 sec, and then it close itself. As in, it closes the current or active modal.
How would I go about doing this?
You can use the following script to close a Bootstrap Modal after 5000 ms:
<script>
$(document).ready(function () {
$("#buttonID").click(function(){
setTimeout(function() {
$('#progressBarCenter').modal('toggle');
}, 5000);
});
});
</script>
I did a debugger in IE and realize that you can't use a sleep function in javascript cause it doesn't exist. You need to use the setTimeout() function instead. Thank you #Chukwuemeka Inya
PHP as you have coded will not work.
Try use Javascript click() fuction for a button and the sleep() function you have used:
$(document).ready(function(){
$('button#ajaxSubmit').click(function(e){
setTimeout($total);
$('#progressBarCenter').modal('toggle');
});
});
The first line of this JS will wait for the entire page to load before let the code to run. The second line will run sleep() after the user click the form button, and after that, toggle the modal.
And add a id to your <button>, like the one below:
<button type="button" class="close" aria-label="Close" id="ajaxSubmit">
Related
I'm trying to get a Bootstrap 4 Modal to pop up on an Order Received page after a 2-second delay on WordPress. I'm new to theme customization. This is what I have, but I can't get the HTML to print on the page.
I want to hook into: do_action( 'woocommerce_before_thankyou', $order->get_id() ); ?> on thankyou.php. I also want the modal to popup on page load. The JS I found for that would be:
<script type="text/javascript">
$(window).on('load',function(){
$('#exampleModal').modal('show');
});
</script>
In the Thankyou page body class, it shows page-id-8 as the page ID.
In my functions.php file, I have the following:
Questions:
For some reason, the HTML is not printing on the page. Any ideas on what else I can do?
What would be the next steps for adding a <script></script> tag on the same page to add a setTimeout function to delay it?
Code:
function create_modal() {
if(is_single('8')) {
echo '
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">A NOTE ON SHIPPING</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Thank you so much for your order! As we\'re sure you\'re aware, we are a little backed up due to COVID-19.</p>
<p>While we work hard to get your order out in a timely manner, we sincerely appreciate your understanding and patience.</p>
<p>When your order ships, you\'ll receive an email with tracking information attached. Please keep an eye out for your package. Also note that FedEx and USPS are also backed up due to COVID-19, and delivery times may also be delayed.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">CLOSE</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>';
}
}
add_action('woocommerce_thankyou_', 'create_modal', 10);
I have this html modal that is triggered by the button click
<button type="button" class="btn btn-success mb-1" data-toggle="modal" data-target="#largeModal">
Large
</button>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="largeModalLabel">Large Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
There are three species of zebras: the plains zebra, the mountain zebra and the Grévy's zebra. The plains zebra
and the mountain zebra belong to the subgenus Hippotigris, but Grévy's zebra is the sole species of subgenus
Dolichohippus. The latter resembles an ass, to which it is closely related, while the former two are more
horse-like. All three belong to the genus Equus, along with other living equids.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
I want to trigger the modal on page load instead of button click. How can I do this?
if you're working with Bootstrap (then I also assume you're using jQuery), it's as simple as the following in the html of the page you're loading.
$('#largeModal').modal({show: true});
you could also just simulate a click on the modal trigger:
$('.mb-1').trigger('click');
of course, make sure this code comes after the markup with the modal. If that's not possible, you'll have to wrap it in a doc.ready like
$(function(){
$('#largeModal').modal({show: true});
})
or
$(function(){
$('.mb-1').trigger('click');
})
again, this assumes jQuery is assigned as $ in your code.
This is in plain vanilla JavaScript. If you put onload="callBack()" inside of your body tag, you can write a function to load the specific element (your modal in this case).
There are a variety of ways to do this. Most simply, you can select the element you want in a script tag and give it the style display: "inline" (or however you want it displayed). Note: you would have to make your modal hidden first by setting display: none
Example:
body:
<body onload="callBack()">
-elements here-
</body>
script:
<script>
var callBack = function() {
document.querySelector("#largeModal").style.display = "inline";
}
</script>
Hope this helps :)
These solutions will work:
<body onload="script();">
or
document.onload = function ...
or even
window.onload = function ...
Note that the last option is a better way to go since it is unobstrusive and is considered more standard.
I am having quite a hard time in solving this problem. Seemed so simple but it is not for me.
PAGE1: HTML
<!-- where to land the external page, but not necessary -->
<div id='feito'></div>
//Javascript calling the page:
$(document).ready(function(){
$.get("page_with_modal.html", function(data) {
$("#feito").html(data);
});
});
//Javascript showing the Modal with ID doneModal:
$(document).on('ready', function(){
$('#doneModal').modal('show');
});
PAGE2: page called from JS (page_with_modal.html):
<html>
<head>
</head>
<body>
<div class="modal fade" id="doneModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
... MODAL TEXT
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
PROBLEM:
From what I can understand, The page is called but the Modal is not appearing.
-I tried to put bootstrap.js at the bottom of PAGE1, JS code before or after the landing DIV. Nothing
-I tried to eliminate all HTML - Body, etc tags and rename it .php (with all the correct sintax). Nothing.
- PAGE2 can be called from PHP using require(). Working ok, no problem.
- I didnt explore the ajax call because the final result (this is an easy/standard mockup) it's already inside and Ajax call, I am trying to make things work from the root up.
What am I doing wrong? Can somebody help me?
Roberto
Simply you have to show the modal after loading and not in document ready event:
$(document).ready(function () {
loadAjax();
});
function loadAjax() {
$.get("page2.html", function (data) {
$("#feito").html(data);
// after loading open modal
$("#doneModal").modal('show');
});
}
Like the title says i have problem to getting the modal.on('hidden') event to run. I can open the modal without any problems. The code im using for it looks something like this:
var info = $('<img src="img/icons/info.png">');
info.attr('data-toggle','modal');
info.attr('data-target','#infoPopup');
The modal itself looks like this:
<div class="modal fade" id="infoPopup" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="popupHeader" class="modal-title"></h4>
</div>
<div id="popupBody" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It Opens perfectly fine but it seems like the hidden event is not triggert when I'm closing it by clicking beside the modal the close button or the X on the top right.
$('.modal.in').on('hidden',function(){
console.log('test');
});
The selected modal is the correct one when i'm trying to access it on the console with $('.modal.in'). So i'm not trying to get a callback on the wrong modal. I also tried it with $('.modal.in').on('hidden.bs.modal',func...). But i got the same result.
Thanks for your help.
for bootstrap 3 you need to use hidden.bs.modal
$('.modal.in').on('hidden.bs.modal', function () {
// do something…
})
if your modal is not in DOM on load this should rather work
$(document).on('hidden.bs.modal','.modal.in', function () {
// do something…
})
Instead of using .modal.in use the id of the modal that you want to fire the event with. If you want to use it for all modals just use .modal and not .modal.in and you will use on hidden.bs.modal
here is a fiddle Fiddle
$('#infoPopup').on('hidden.bs.modal',function(){
alert("Modal Closed");
});
Does a bootstrap modal have an onload event? I want to call a http GET request when the modal is opened to populate the modal with data from a rest api. I have a form in the modal and I have called the GET function on the onload event of the form, but it doesn't work.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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="myModalLabel">Agent details:</h4>
</div>
<div class="modal-body">
<form onload="getData()" style= "font-size: 16pt">
Per the documentation, you can listen to the show or shown events.
From The Documentation:
show.bs.modal => This event fires immediately when the show instance method is called.
shown.bs.modal => This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
$('#myModal').on('show.bs.modal', function () {
// do something…
})
What I've found to be the best way to do this is to add the onclick attribute to the html element that calls the modal.
<button type="button" onclick="PopulateAddModal()" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#AddModal">Add</button>
Then in your javascript..
function PopulateAddModal() {
//do stuff here...
}
This will ensure that your code is ran as soon as the modal is called. Otherwise, the javascript code will not run until the modal has completely finished it's "fade-in" animation.