bootboxjs / bootbox

Wrappers for JavaScript alert(), confirm() and other flexible dialogs using Twitter's bootstrap framework

Bootbox - Bootstrap powered alert, confirm and flexible dialog boxes

Please see http://bootboxjs.com for full usage instructions, or head over to http://paynedigital.com/bootbox for the original writeup about the project.

Contact

The easiest thing is to find me on twitter @makeusabrew.

Contributing

Please see the CONTRIBUTING file for guidelines.

Running Tests

Tests are run using Karma using the Mocha test adapter. To run the tests yourself, simply run

npm install

within the project followed by

npm test

When submitting pull requests, ensure your tests pass. Pull-requests with failing tests will be rejected. See the CONTRIBUTING file for more information.

A note on Bootstrap dependencies

Bootbox 6.0.0 is the first release to support Bootstrap 5.0.0.

Bootbox 5.0.0 is the first release to support Bootstrap 4.0.0.

Bootbox 4.0.0 is the first release to support Bootstrap 3.0.0.

Bootbox 3.3.0 is the last release to support Bootstrap 2.2.x.

Much more dependency information can be found on the Bootbox website.

6.0.0 (Latest Release)

• Removes various IE polyfills
• Replaces var with let
• JSDoc cleanup
• Adds code to handle cases when click starts on the modal body and ends on the backdrop and backdrop is set to true
• bootbox.locale.js and bootbox.all.js are now generated files and will be found in the /dist directory
• Simplify locale file structure
• Changed a few locale identifiers to match IANA specifications:
  • bg_BG -> bg-BG
  • pt-br -> pt-BR
  • zh_CN -> zh-CN
  • zh_TW -> zh-CW

For a full list of releases and changes please see the changelog.

License

(The MIT License)

Copyright (C) 2011-2023 by Nick Payne [email protected]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE

bootbox's Issues

Bootbox return value

Does bootbox return a boolean value from the confirm() method?
I have a link which has bootbox.confirm on the onclick attribute.

For some reason the following code forces bootbox to 'flash' and be automatically respond with a positive response.

onclick="if(bootbox.confirm('Are you sure?')){return true;}else{return false;}"

The JS call is chained together in the background, but bootbox doesnt seem to return a boolean value?
This could be coupled with JSF, as the demo pages are ok.
Should it return a boolean value?

Ability to Cancel Close in Callback

Have you considered adding the ability to cancel the closing of the box in the callback? I'm using the callback to post a FORM that I load into the box in Javascript. When the user clicks OK, I call submit on the form. I'm posting that form back to the server via AJAX. Predicated on the outcome of that POST, I want to either close the box and update something on the page, or leave the box open and replace the content with an updated form. Thanks!

vertical-alignment issue

Maybe this is something to be fixed via Bootstrapper and its crew itself, anyways:

Vertical centering only works when the actual html-content is displayed on top, without any frames playing parents. As soon as you put the bootbox into let's say a facebook-canvas, which is an iframe actually, the centering does not work correctly anymore since whatever mechanics are calculating the position they do not take the user's viewport and scolling position into account to calculate the center correctly.

Any chance to hook into this 'problem', or is it better to inform the Bootsrap crew instead?

Cheers from Berlin!

Be more explicit about Bootstrap dependencies

We're starting to get quite a few issues being raised which are effectively due to our dependency on Bootstrap's version being too generous. At the moment we simply assume that Bootstrap >= 2.0.0 will work, which is simply not true (e.g. #57, #58, #60 and probably quite a few closed issues).

This shouldn't happen since they too are using SemVer, so everything under 2.x.x shouldn't break backward compatibility, but inevitably the odd thing looks like it's slipped through.

Need to work out the best way of supporting at least the 2.0.x series of Bootstrap as well as the 2.1.x series. The easiest thing might be to simply stop any further work on our current 2.x series and lock it to Bootstrap 2.0.x - then fix any bugs raised which are Bootbox issues or dependency issues related to the 2.0.x series of Bootstrap.

Our 3.x series could then solely support Bootstrap 2.1.x, though I'd worry about ending up with too many different versions all trying to support minor versions of Bootstrap. It'd be confusing from a dev perspective and a user's, too. Perhaps just support the last two minor versions of Bootstrap?

The "next" branch development should only target the latest Bootstrap version, but unfortunately it could not totally supersede 3.x since we can't force Bootbox users to use a completely new Bootbox API just to be able to use Bootstrap 2.1.x (or whatever version it's on when 'next' sees the light of day).

Multiple dialog calls can hang/crash firefox

Just spent a while debugging this problem, but it turns out to be a known issue/won't fix in the twitter bootstrap's modal project: twbs/bootstrap#4781

The bootbox.js documentation suggests that you can successfully launch dialogs from within button presses on other dialogs.

Sadly, it would seem this is not actually safe to do currently :(

I'm not raising this as a bug to be fixed, more to mark it as a known issue, to save others the pain if they experience this (launching a modal dialog from within an existing modal dialog) crashing firefox and are unable to debug it! :)

Add ability to have separate title and description

Having a title and description would allow for clearer dialogs. For example:

title: "Really delete?"
description: "Are you sure you want to delete this asset? Once it is deleted, all associated files will be removed. This action cannot be undone."

Javascript passes bootbox while waiting on confirmation

heres a fiddle I made quickly to show the bug - http://jsfiddle.net/yohn/XSKYU/1/

whats happening is i when I click on the "Remove" button a javascript alert pops up saying undefinded instead of waiting for the results from the bootbox confirm popup. I understand how the callback function works, but as you can see in the fiddle I have 2 choices to make, and if the remove is clicked thats when I needed the confirmation box to stall the script until the user selects what they wanted to do, and then process to the ajax call or not, depending what they picked..

I just didnt want to have 2 ajax call within the same process, but i may have to do that anyways unless i figure out a way to have javascript wait..

OK/Cancel or Cancel/OK - OS context

I know issue #58 is more to do with CSS execution of the positioning of the primary button, but there's a related issue - on Mac OK the dialog buttons are typically arranged as Secondary/Primary. That is, the OK button is in the right-most position, not Cancel.

This should be OS contextual.

See this example:

Feature request: Modification of Icons

It would be nice to change the buttons (add, modify, remove) and it's labels/icons of an opened bootbox at any time, not only at creation time of the modal.

div.on('shown', ...) handlers not fired when animate = false

The 'shown' event never gets fired if the modal doesn't animate in. We need to detect if animation is disabled and if so manually div.trigger('shown'), or perhaps a neater solution would be to just wrap the code in each shown handler in a separate method and invoke that instead.

Modal on mobile

On small screens, bootstrap modals usually squish to stay 100% visible. For some reason the bootbox modals overflow the viewport.

I think this issue is related to #56

Great work by the way!

IE which & Key

The IE doesn't understand e.which better use e.keyCode.

bootbox.js:

        // hook into the modal's keyup trigger to check for the escape key
        $(document).bind('keyup.modal', function ( e ) {
            if (e.which == 27) {
                hideSource = 'escape';
            }
        });

Need for double click on OK confirmation for Chrome

I use booxbox confirm functionality and I have a problem with Chrome v21.0.1180.79 which I don't have with Firefox v14.0.1. The problem is as follows: when a bootbox confirmation appears I have to click two times on the OK button to confirm and close the confirmation box, clicking on cancel once is enough to close the confirmation.

callback not called when dialog is closed with click on modal

if i click on the black modal layer, the dialog closes but my callback is never called.

make backdrop=false modal?

If I set backdrop = true then a backdrop appears, and this backdrop blocks any clicks on the rest of the page.

if I set backdrop = false then the backdrop doesn't appear (of course) ... however the user can now click any links in the rest of the page, which is not desirable.

Is there some way to specify a fully transparent backdrop?

additional methods

• hide: each method should return the element it creates which can then call twitter's hide method
• hideAll

Feature Request: Add keyboard support

Add ability to press ESC to cancel and Enter for OK in Prompt and Confirm dialogs
Add ability to press ESC and/or OK in Alert dialogs

Previous version still available?

Hi makeusabrew!

As an idiot, i've deleted the previous version archive from my hard-drive (i usually fork Git as backup) and my script is not compatible with this new version... Shame on me...

Do you still have the Bootbox previous version available, please?

Thank you

Add support for bootstrap's icons

Primary button position on confirm modal

Since twbs/bootstrap@0e8427e#less/modals.less Bootstrap CSS doesn't float the modal-footer buttons to the right, preferring text-align instead.

This means that with Bootbox, the primary button on a confirm modal is not shown in the bottom right position.

( HTML + Forms ) inside Bootbox

Any plan/scope for HTML markup and forms inside the bootbox ?

Overriding window.alert()

Might be a silly question, but have you thought about overriding window.alert() so that we could just use a plain alert() instead? Perhaps by using the proxy pattern?

Include version in bootbox.js header

Hi all,

It would be very useful to have the version number in the bootbox.js header, similar to bootstrap-modal.js:

/* =========================================================

• bootbox.js v2.1.2

Regards

Enrique

Boxes not showing up in IE 10 on Windows 8

I am using bootbox in a project and it works great in Chrome, IE9, Firefox, etc. However, when we tested it in IE10 (the non-metro version) it never works. The screen fades black to go modal, but the box never shows up.

Too much recursion when bootbox.alert() used at the same time as a bootstrap modal

When I raise a "non-bootbox" bootstrap dialog and then call bootbox.alert(), I get a "Too much recursion" error from jquery.

This jsfiddle example demonstrates using Bootstrap v2.2.0:

http://jsfiddle.net/jptillman/NKvjd/6/

This error doesn't occur when using Bootstrap v2.0.4

Is it a problem with BootBox, or with BootStrap?

Incorrect german translation

As raised on twitter:

"German Text for CANCEL is Abbrechen not Kündigen."

Bug when the dialog contains a link

If the dialog contains a link <a> inside its body, if the user clicks on it the dialog will disappear.

This issue came from L.363

$("a", div).click(function(e) {
            e.preventDefault();
            hideSource = 'button';
            div.modal("hide");
            var handler = $(this).data("handler");
            var cb = callbacks[handler];
            if (typeof cb == 'function') {
                cb();
            }
        });

$("a", div) should be $(".modal-footer a", div)

Modal Close Button

There's no param to disable the Modal's Close Button.

Add minified version of library

In the root as bootbox.min.js will be fine.

Cancel button in bootbox.prompt still performs callback.

I'm calling bootbox.prompt, which automagically generates a text input, an OK, and a Cancel buttons. My expectations are that pressing Cancel should simply close the box without performing any more logic. However, when using the latest version (2.3.1) of bootbox, pressing Cancel still fires the callback. The normal close (x) button works as expected.

Here's a pared down example of my code:

function deny() {

        bootbox.prompt("Enter a comment here.", function(result) {

           alert("This should not fire when pressing Cancel!")

        }, {
            "animate": false
        });

    }

Allow dialog titles to be specified

It would be nice to be able to somehow display a title in alert, confirm etc dialogs!

Remove href="#" from buttons/links

Having the hash in the href makes single page applications, such as those using Backbone.js, not route correctly.

I think you could remove the href attribute altogether from the buttons/links like so:
<a class="close" data-dismiss="modal">×</a>
<a class="btn" data-dismiss="modal">Close</a>
<a class="btn btn-primary">Save changes</a>

Bootbox Confirm not work

This plugin does not work.
I have an icon that has the method of removal of the object, just need a confirmation window, but when i click "yes" the object is not removed. In firebug appears the message "true" but not remove the object.

$(function () {
$("a#confirm").click(function(e) {
e.preventDefault();
bootbox.confirm("Confirm exclusion?", "No", "Yes", function(confirmed) {
console.log("Confirmed: "+confirmed);
});
});
});

I want my button to do the removal and not just going to put ajax code to delete an object.

a class="icon-trash" id="confirm" href="{% url 'del_setor' setor.id %}" title="Delete"

Using Firefox12, last version of Bootstrap and Django 1.4.
Regards.

"show: false" option ignored

The example/doc page for v 1.1.2 indicates that you once supported a "show" option that would allow you to configure dialogs and toggle whether or not they would open immediately. This doesn't seem to be a supported feature anymore but would be very useful in situations where you need to configure a dialog but not necessarily open it until later (this way you don't have to configure the dialog every time u need to use it - just call mydialog.modal('show') ).

http://paynedigital.com/2011/11/bootbox-js-alert-confirm-dialogs-for-twitter-bootstrap

Bug: .dialog with backdrop

Issue

bootbox.modal('a',{backdrop:false}); // still add a backdrop

Workaround

In bootbox.js#L382

"backdrop" : options.backdrop || true,

should be something like

typeof options.backdrop !== 'undefined' ? !!options.backdrop : true,

But I think that the best way could be to pass options directly to .modal(). Since backdrop is already set to true by default in bootstrap.js.

How to submit a form when element is a submit button

How do I submit a form with a confirm dialog?

I am trying to something like the below but it doesn't work:

$(function(){
$('.confirm').click(function(e){
e.preventDefault();
bootbox.confirm('Are you sure?', function(result){
if(result){
$(this).closest('form').submit();
}
});
});
});

confirm - add onEscape option

Hi. I was trying this lib and would like to use confirm function with a custom onEscape handler, but it doesn't receive an option parameter.

Update documentation for 'class' on buttons

I might just be nitpicking but reading your documentation for the buttons, it seemed like I could just put 'primary' or 'danger' for the class option on a button. When it didn't work as expected, I was puzzled until I looked at your source code. It isn't prefixing the 'btn-' to the class, so you actually have to put 'btn-danger' instead of just 'danger'. Maybe updating the documentation to note this will save some people a little frustration down the road. BTW, I am using the most recent version of Bootstrap too so if you were using an old bunch of classes, then this is understandable.

Dialog not working in IE 9

I tested the examples at link http://bootboxjs.com/ . Clicking on any link does not open the Dialog.

License?

Thanks for building bootbox.js. The minimal bootstrap-modal.js is a nice start, but it falls short pretty quickly.

Would you mind adding a LICENSE file and adding some licensing text to the top of the bootbox.js file (and the .min.js variation)? Until that's there it's technically "All Rights Reserved"...at least in the US. :/

Thanks again for building this, and for considering stating a license.

Confirm dialog requires two clicks

Having the same issue as previously mentioned:

'I use booxbox confirm functionality and I have a problem with Chrome v21.0.1180.79 which I don't have with Firefox v14.0.1. The problem is as follows: when a bootbox confirmation appears I have to click two times on the OK button to confirm and close the confirmation box, clicking on cancel once is enough to close the confirmation.'

I also noticed that the OK and Cancel buttons are reversed positioned for myself?

Thanks

using bootbox.confirm() within a bootstrap modal

is it possible to have a bootstrap modal stacked on top of another modal? can't seem to get bootstrap.confirm() to work within my modal, it just clears the existing modal when bootbox pops up.

thanks

Set backdrop = false

Hi.

Is there a way to use bootbox without showing the background (i.e. backdrop = false).

Tried:

 bootbox.confirm("Are you sure?", function(confirmed) {}, {"backdrop": false});

But it did not work.

Thanks.

Setting default strings for translations

Of course there is the possibility to set the button labels through the dialog-method (or as parameters), but it would be nice to configure a default string for like "Cancel" or "Confirm" in a different language.

IE (7/8/9/10) Compatibility ?

Great efforts ! Nice work ! Looks and feels awesome in FF and Chrome.
Tried on IE 8. It doesn't work. Any plan to have IE compatibility?

Responsive behavior

Always see modal window in page footer when calling confirm action in screen width <480px.
But displayed good in full desktop screen sizes.
All non-bootbox modals work well in same conditions.
Modal-responsive-fix from https://github.com/niftylettuce/twitter-bootstrap-jquery-plugins has no effect.

Unit tests

No excuse, need to find a way to make the code testable if DOM tests just don't work out.

Confirm modal before deleting a post

Hi,

I'm quite a noob in JS and I need your help to merge your confirmation function with my jQuery function (Ajax call for deleting some informations).

Here is my JS Code :

function DelFav(var1,var2) {
    jQuery.ajax({
    type: "GET",
    url: "......url...with...params......",
    error:function(msg){
    alert( "Error !: " + msg );
    },
    success:function(data){
        jQuery('#communication').empty();
        jQuery('#communication').html(jQuery('#communication').text() + data + " ");
    }});
}

This function is called by a link near each objects. Here is the HTML part :

a class="button icon remove danger" href="javascript:void(0);" onClick="javascript:DelFav(var1,var2);" style="text-decoration: none !important;">Delete /a>

When a user click on the delete link, i'd like a confirmation dialog to be shown with yes or no buttons. If YES button is clicked, the ajax call is sent.

Could you please tell me how to figure out?

Thank you!

Add Buttons on Modal Window

Add Buttons on Modal Window

Upgrade bootstrap version to 1.4

Not 100% sure what the changes are but let's upgrade the supporting CSS and JS and check everything still works.