bootbox

bootbox copied to clipboard

Since Bootstrap v5 is about to go beta (last breaking changes implemented), are there plan to make bootbox BS5 friendly?

Plans? Not really, at least not for this repo. This is covered, more or less, in #756.

BS5 will still have jQuery support (they added a helper library that will hook into jQuery if it's present), so aside from any markup changes in the modal, I'd suspect the current version of Bootbox should continue to work.

I'll try to take a look once BS5 goes beta, but no one except Nick (@makeusabrew) has admin rights on the repo, so not sure how much longer I'm going to maintain this version.

I just pulled down beta1 and ran the Bootbox docs with it (which uses our 5.5.2 release) and it seems to work as expected. The markup for a modal seems 99% the same, so aside from tweaking some data attributes, I think you're good-to-go, assuming you don't remove jQuery. If you want a jQuery-less version of Bootbox, that will probably not happen here.

Bootprompt is a derivative of Bootbox (changed enough that it's pretty much a new library) written in TypeScript, and I think it doesn't have a jQuery dependency. You might want to check that out.

Bootstrap 5 is now official in beta and it looks pretty solid. All docs are also officially online and changes are clear. There aren't many big changes so Bootbox will probably work our of the box.

But still Bootstrap 5 compatibility would be really nice to have, Having it also jQuery less will be really nice.

Bootprompt still requires jQuery.

As I noted, I tested the current version of Bootbox against the Beta1 of Bootstrap and it worked. So, caveat emptor, but it's usable.

Not going to remove jQuery at this point. That would require a major version bump (due to a bunch of required rework), which I'm not really keen on, moving forward. If @tarlepp wants to put the effort in, maybe you'll see official BS5 support, but don't get your hopes up.

Testing right now with BT5 beta 1 and the only fix required is in closeButton template. I'm actually using: <button type="button" class="bootbox-close-button btn-close" aria-hidden="true"></button> Instead of: <button type="button" class="bootbox-close-button close" aria-hidden="true">&times;</button> and everything seems working fine.

Testing right now with BT5 beta 1 and the only fix required is in closeButton template. I'm actually using: <button type="button" class="bootbox-close-button btn-close" aria-hidden="true"></button> Instead of: <button type="button" class="bootbox-close-button close" aria-hidden="true">&times;</button> and everything seems working fine.

Just to add to this, add float-end to make it perfect :)

<button type="button" class="bootbox-close-button btn-close float-end" aria-hidden="true"></button>

I'd prefer not to go that route - our modals should work the same as if a dev built the modal themselves (at it's core, Bootbox is just a dynamic Bootstrap modal generator). So, unless Bootstrap's modals themselves require any of the -end classes, I wouldn't go down that path.

If Bootstrap 5 does advance to a release-candidate level sometime soon, I might make an effort to push an update with BS5 support, but... probably not. I'd prefer to spend what time I have working on a TypeScript rewrite, which will not happen in this repo. I'd recommend forking the repo and making whatever changes you find useful.

I'd prefer not to go that route - our modals should work the same as if a dev built the modal themselves (at it's core, Bootbox is just a dynamic Bootstrap modal generator). So, unless Bootstrap's modals themselves require any of the -end classes, I wouldn't go down that path.

If Bootstrap 5 does advance to a release-candidate level sometime soon, I might make an effort to push an update with BS5 support, but... probably not. I'd prefer to spend what time I have working on a TypeScript rewrite, which will not happen in this repo. I'd recommend forking the repo and making whatever changes you find useful.

Then you'd need to change the way the component is created, because right now, it's making the header using "modal-body" parent class, which is wrong, and should be 'modal-header'. So for that reason, the very simple and easy fix (until an official update comes out) is to just replace the closeButton template as mentioned above.

Example of bootbox generated html:

<div class="bootbox modal fade bootbox-confirm show" tabindex="-1" role="dialog" style="padding-right: 17px; display: block;" aria-modal="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="bootbox-close-button btn-close float-end" aria-hidden="true"></button>
        <div class="bootbox-body">HEADER</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-default bootbox-cancel">Cancel</button>
        <button type="button" class="btn btn-primary bootbox-accept">OK</button>
      </div>
    </div>
  </div>
</div>

How a modal should be

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

At it's simplest, yes, that's the markup you get (although the style attribute is actually added by Popper.js). If the title and the message options are both specified, you get a standard Bootstrap modal.

The "close button in the body" markup is how the first version of Bootbox was created, and we've left it like that to avoid breaking any custom code or CSS which a dev may have written to target that button. I don't disagree that it probably should always exist in a modal-header, but... it is what it is.

Like I said, forking the repo is probably a good idea, if you want any of the changes suggested here.

Would love for a vanilla js of bootbox, am using BS5 right now and have made a design decision to not include jQuery.

By taking jQuery out of the equation, page loads have gone from 700ms to approx 300ms for me (with some under that).

I've found that jQuery just takes a long time to load after the DOM is ready.

I would do it with just native bootstrap, but unlike bootbox, Bootstrap doesn't support multiple modals being displayed at the same time properly.

With bootbox, I can open 1 modal, then open another on top of it, then if I close the topmost one, the modal behind it stays open.

With bootstrap, if I open 1 modal, then another, then close the topmost one, both modals close :(

@tiesont I was able to get BB working with BS5 using the following:

jQuery(document).ready(function($) {
    $.fn.modal = bootstrap.Modal.jQueryInterface
    $.fn.modal.Constructor = bootstrap.Modal    
});

There are minor style issues, such as with the close button, but that can be controlled via CSS.

Hope this helps someone else.

@noctivityinc You shouldn't need to do that - Bootstrap already includes jQuery support.

@tiesont You need to do it as $.fn.modal is no longer supported in Bootstrap 5 beta 3. You instantiate a modal now using new bootstrap.Modal

@tiesont You need to do it as $.fn.modal is no longer supported in Bootstrap 5 beta 3. You instantiate a modal now using new bootstrap.Modal

Hmm strange, I didn't have to do that. Simply make sure jquery is included before you call bootstrap's js include and you're good to go.

Been using 5.4 bootbox with BS5 beta 1 through 3 without any issues so far (apart from the minor style issues and fixes I mentioned above)

Yeah - take a look at the new docs:

https://getbootstrap.com/docs/5.0/components/modal/#via-javascript

On Sat, Apr 3, 2021 at 3:28 PM Joshua Weller @.***> wrote:

@tiesont https://github.com/tiesont You need to do it as $.fn.modal is no longer supported in Bootstrap 5 beta 3. You instantiate a modal now using new bootstrap.Modal

Hmm strange, I didn't have to do that. Simply make sure jquery is included before you call bootstrap's js include and you're good to go.

Been using 5.4 bootbox with BS5 beta 1 through 3 without any issues so far (apart from the minor style issues and fixes I mentioned above)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/makeusabrew/bootbox/issues/777#issuecomment-812914456, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAATIARTPMUSXRXVORK5GEDTG5T6BANCNFSM4UQZTZ7A .

Yeah - take a look at the new docs: https://getbootstrap.com/docs/5.0/components/modal/#via-javascript

You're missing the point, Those docs are for native bs5, but bs5 still has optional jQuery support: https://getbootstrap.com/docs/5.0/getting-started/javascript/#still-want-to-use-jquery-its-possible

Again, just make sure jQuery is called before BS5 and you're good to go. No need to add any events to initialize bootbox.

Interesting. I'm using jQuery but through Rails 6, so maybe it's not being set globally.

All I know is my hack works for now.

On Sat, Apr 3, 2021 at 3:34 PM Joshua Weller @.***> wrote:

Yeah - take a look at the new docs: https://getbootstrap.com/docs/5.0/components/modal/#via-javascript

You're missing the point, Those docs are for native bs5, but bs5 still has optional jQuery support: https://getbootstrap.com/docs/5.0/getting-started/javascript/#still-want-to-use-jquery-its-possible

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/makeusabrew/bootbox/issues/777#issuecomment-812915005, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAATIAS2AYV64HSPCS5V273TG5USRANCNFSM4UQZTZ7A .

Been using your component for many years. It's been a life saver. I was hoping it would work fine with Bootstrap 5. I'm just starting to move to version 5. I am still using jQuery, but this little close dialog is a bugger.... .bootbox-close-button {display:none!important;} fixes it but feels wrong.

Would be great to have this updated with those changes

The only required update is the change of the close button. Or is there any setting of not displaying it at all?

BS5 is officially released on August 5. Any chance we'll see updated Bootbox supported BS5?

Probably not.

To properly support Bootstrap 5 we would need to remove our jQuery dependency, which is not a small task. It's not just a matter of changing a button style - Bootstrap updated things like which data- attributes are used, among other changes.

I also still want to support at least Bootstrap 4 and (if possible) Bootstrap 3. Despite what some may think, there are plenty of sites out there still using 3.x and 4.x, so we can't just jump on the new hotness and forget the rest.

I do plan to do the work at some point, but probably not here (unless @makeusabrew pops in and lets us know he wants to keep supporting this project). There's a backlog of things that need to be done on this repo which can't be done without the correct permissions, and Nick is the only one with said permissions.

Not sure if that answered your question or not. Sorry.

Removing jQuery is hardly a requirement, you can just make it a dependency of Bootbox. This project is dead if BS5 support is not going to be added.

Removing jQuery is hardly a requirement

To you, sure. For me, given that Bootstrap doesn't use it and that there seems to be a trend towards not using jQuery if possible, I'm not going to force a somewhat heavy dependency on an external library if it's not already being used. Even going the route of jQuery Slim or Zepto still adds an overhead that I'd rather avoid if we don't need it.

This project is dead if BS5 support is not going to be added.

Sure. Send flowers. I'll make sure Nick gets them.

If it's so easy then go remove jQuery yourself and share the work with others on here.

I never said removing jQuery was easy? I said the opposite?

Throwing a +1 here for BS5 support. It seems to me like a quick upgrade to officially support it, and later reafactoring to remove undesired dependencies and the like would be the best option. Just to get a working library in peoples hands from NPM/Unpkg/CDNJS.

So what about just creating real pull requests to fix this then? This task isn't trivial one - imho (but I might be wrong and if that is the use case everyone wins) - And for me it's just fine just doing this separated steps, like first just add basic support for BS5 with JQuery and next step remove that JQuery - which is BC change.

Also we should look - https://github.com/twbs/release - which shows that 4.x has +1 year support still - so we cannot forget that. But really supporting multiple versions could be really pain in the *ss, so really if you're using this library - we need your help to provide proper support for each active bootstrap versions.

So I would recommend you to start to create pull requests to fix this issue.

I'll second what @tarlepp said - I'm glad people are still using this, and want to keep using it with Bootstrap 5. I don't think it's as easy an upgrade as some have suggested, unless things have changed from the last beta I was testing against. There are changes under the hood to Bootstrap that would require some refactoring on our end, and I'm not keen on starting that anytime soon.

There's also the persistent "halp, npm says this is an insecure package" requests we get, so IF we were to add BS5 support, we'd have to address that, somehow, too, and, well, I don't have that kind of time for a repo where the owner is mostly AWOL. Yes, I'm poking you, @makeusabrew - this is me officially asking for the repo to be handed over.

Spitballing here, but what about just creating an entirely new library for BS5 and leaving this one to stand on its own?