twbs/bootstrap

Feature request: side Modals

Closed this issue · 5 comments

MartijnCuppens commented

I was recently working on a project where I themed a Bootstrap modal as a side drawer. I made an implementation that is compatible with the modal sizing classes. Maybe this is something that's nice to have in Bootstrap by default?

Demo: https://codepen.io/MartijnCuppens/pen/OwwjWV?editors=1100

ezgif-2-21a3fc9652

PR incomming...

myplaneticket commented

@MartijnCuppens I really need this. Would love it if you could share the SCSS changes for this!

MartijnCuppens commented

@myorangeca, you can find the code in the PR #27035

  • ❤️1
coliff commented

This looks really good! Have you seen this (#21540) PR? Not sure how it compares....

MartijnCuppens commented

@coliff, I only searched for "side modals" in the open issues and did not came across that PR. Thanks for mentioning it.

There are some differences in the PR's though:

  • This version uses flexbox to push the .modal-footer to the bottom, not position: absolute;. This makes the footer optional
  • This version is compatible with the modal sizes.

I see there is a bit of discussion in #21540 to make a new component instead of extending the modal functionality. The reason I chose to extend is that modals actually have all the functionality that the drawer need (the API, the keyboard accessibility). I think we would have a lot of duplicate code if we're going to make another component for this.

  • 👍3
viktorsmari commented

I love this, and really want this in basically all of my projects as the nav (hamburger) menu.
What is the likelihood of getting a version of this into Bootstrap?