ehpc / bootstrap-waitingfor Goto Github PK
View Code? Open in Web Editor NEW"Waiting for..." modal dialog with progress bar for Bootstrap
License: MIT License
"Waiting for..." modal dialog with progress bar for Bootstrap
License: MIT License
bs - 4.0.0
bootstrap-waitingfor - 1.2.7
with wf - https://monosnap.com/file/GUoNePszp7AKhuazOINrwmhmWpG1jt
without wf - https://monosnap.com/file/3sEnc3ir9j7BycFAdHKqijEBVztJRw
Hello,
Thanks for this script.
How we can add callback function to this?
when I run waitingDialog.hide();
, I want to alert('1');
after it's gone hidden.
Right now if you do:
waitingDialog.hide();
alert('1');
You will get the alert while the modal is still there, I want to have the alert after the modal is completely hidden.
Thanks
Hi,
As this plugin uses the modal component of Bootstrap, one would expect the default events to be usable (such as 'show.bs.modal'). However, when calling waitingDialog.show();
, that event doesn't seem to be triggered as expected.
Am I missing something, or is this a bug?
Example: https://bootsnipp.com/snippets/PElzm (check the HTML. The second console.log() is never executed).
I noticed that if I run $("#someModal").modal
right after waitingDialog.hide()
"expands" the page, or more like it moves the page to the left and I could see a space on the right side of my navigation bar. My solution is:
/**
* Closes dialog
*/
hide: function (callback) {
$dialog.modal('hide');
if(callback){
$dialog.on('hidden.bs.modal', function(){
callback();
});
}
}
now, you can show the next modal asynchronously AFTER hiding the waitingDialog.
waitingDialog.hide(function(){
$("#someModal").modal();
});
Nice plugin :)
I like this plugin, because it able to add custom text in the progress bar.
Btww, does this plugin support on Yii2 Framework?
Thanks
Hello,
I'm having an issue with this plugin in Safari 10.0.2 on macOS
code works well on Firefox and Chrome but while testing in Safari the popup doesn't load on click, only loads after page redirects.
<a class="btn btn-lg btn-block btn-warning" onclick="{literal}waitingDialog.show();setTimeout(function () {waitingDialog.hide();}, 3000);{/literal}" href="{#domainnamesslportal#}
*using smarty v3 hence the literal / # code
If i click on the link and stop the page from loading then the popup launches.
Using JQuery 3.1.1
It does not work in Safari.
hi
bower main is loading "src/boostrap-waitingfor.js" file while "boostrap-waitingfor.js" is inside build directory, so cannot use gulp main-bower-files for tasks
Hey there,
For CDN control purposes, could we define versions numbers, and add a Changelog.md to the project. Can I help with that somehow?
First of all, thanks for this great tool. It's very easy to use and adds so much to websites.
Feature 1
I am about to add something to this library that will make it easy to have access to some basic documentation.
It's a help method that people can just call at the console using waitingDialog.help()
. This will write in the console a least the structure of the options object that can be passed to the code.
Feature 2
An init function that can be called once after loading the library for setting default options. That way, there will be no need to pass the options every time we are calling the show() method unless we need to temporarily override the default.
What do you guys think? Is it something you could accept as a pull request?
Thanks
Hi,
I've try bootstrap-waitingfor with boostrap 4 but I found if I try to invoke hide() method, dialog not closing.
Problem I is fade can not permit to close it immediately.
I able to correct this issue by modify hide() method with this code at line 143:
hide: function () {
if (typeof $dialog !== 'undefined') {
$dialog.on('shown.bs.modal', function(e) {
$dialog.modal('hide');
});
}
}
If in a situation the script calls show function with an already dialog visible, there is no way to hide it. Even with subsequent calls of hide();
remove line 94 $dialog.find('.progress-bar').addClass('progress-bar-' + settings.progressType);
add $dialog.find('.progress-bar').addClass('bg-' + settings.progressType);
Hello, first off, nice plugin!
I want to know if would be possible to add support for Bootstrap 4 to this cool plugin.
Thanks!
I want that waitingDialog.show() blocks only some part of my page, and not entire page. Like happens in http://bootsnipp.com/snippets/Oe5XM .
But I didn't found how do that.
PR #21 probably fixes this (haven't checked though). Opening an issue to provide more detail as to what the issue is and how we could address it.
First of all, fantastic library. Really makes things much simpler when I want to show the user that a task is in progress, and the fact that I don't have to add any extra markup to the page makes it all that much easier to use.
There is an issue, however, when a web application uses a content security policy that doesn't specify unsafe-inline
, which is considered bad practice and sacrifices a substantial amount of security. The generated element (below) contains 4 inline style attributes, which the client will refuse to apply:
<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:visible;">
<div class="modal-dialog modal-m">
<div class="modal-content">
<div class="modal-header" style="display: none;"></div>
<div class="modal-body">
<div class="progress progress-striped active" style="margin-bottom:0;">
<div class="progress-bar" style="width: 100%"></div>
</div>
</div>
</div>
</div>
</div>
The result is a modal that works, but contains no visible progress bar (because its width
is 0
) and has layout issues to the padding-top
and overflow-y
CSS attributes not being applied.
There are a few approaches we can take to fix this issue:
style-src
includes self
- from PR #21 I am guessing this isn't a particularly appealing option.I'll submit a PR with the proposed change shortly.
Hi, just a small typo In bower.json.
{
"main": "src/boostrap-waitingfor.js",
}
it should be
{
"main": "src/bootstrap-waitingfor.js",
}
In my grunt file, I have task (bowerInstall) that inject Bower components into the HTML file. It looks at where the bower dependencies are and copies all the paths into my index.html as script or style imports. ( That stuff is made by Yeoman, not me )
Anyway, when importing your package, it failed to do so because of the typo above.
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.