Bootstrap tour conflicts with other Bootstrap Modals

[PsychoIndigo]

I don't know if it's because of the z-index, but I have two modals on one page that don't work because I installed bootstrap tour on the same page. Only the bootstrap tour works and the other modals only show the black backdrop.

[IGreatlyDislikeJavascript]

Can you explain the problem in more detail - are the modals part of a tour, are all tour steps inside a modal, is the tour unrelated to the modal but it's causing visual issues etc? Are you using modals precreated in the dom or are you using a plugin like bootstrap modal to programmatically generate them?

There are a number of issues getting modals to work with tour because of the way bootstrap modals are created vs the way bootstrap tour expects dom elements.

Try my fork and see if that fixes it.

[PsychoIndigo]

I'm using bootstrap 4 and I have several modals on the page I'm currently working on. I have a welcome to the page modal that will tie into the bootstrap tour and several search options that have built in bootstrap modals attached to them. When I install the boostrap tour onto the page, none of the other modals launch properly. Only the backdrop shows up and when you click anywhere in the window, the modals backdrops won't disappear, you have to reload the page in order to get rid of them. The bootstrap tour functionality works fine, it just makes any other large modal on the page malfunction. I'm guessing it's because all the modals are bootstrap and probably share many classes and id's. Or maybe the z-index of the modals are conflicting. I'm not sure. Once I remove all boostrap tour css and js the page works perfectly fine and goes back to normal.

What do you think is happening?

Thanks,

Indigo

[IGreatlyDislikeJavascript]

When you say this:

When I install the boostrap tour onto the page, none of the other modals launch properly

Do you mean "the modals don't launch properly after I start the tour", or do you mean "even if I don't start a tour, the modals don't launch"? If it's the latter, there's some other problem, because simply including tour.js into the page but not launching a tour should have zero effect on modals.

But I'm guessing it's the former. It's been a couple of months since I worked on this code but I think the problem is the tour and bootstrap modal "collision" issue. Try using my fork and see if that solves it - there is code specifically added to magically handle tour steps with modals, and with children of modals.

Download the updated bootstrap-tour.js and .css from here: https://github.com/IGreatlyDislikeJavascript/bootstrap-tour/tree/master/build

Note, that fork is for bootstrap 3 - as is the rest of tour - so you'll maybe need to do some other stuff to make it bootstrap4 compatible.

Good luck.

[redelement]

It is not Bootstrap 4 compatible. If you use the standalone version it will function but modals will not function properly as the .fade classes in the stylesheet prevent the modals from opening properly. Simply removing them does not solve the problem either as there are a few incompatible points in the JS as well. I have just encountered this problem and will reply with a fix when I have one.

[IGreatlyDislikeJavascript]

@redelement please can you check if my fork of Tour fixes this for you. https://github.com/IGreatlyDislikeJavascript/bootstrap-tourist

I've specifically added robust modal handling as well: https://github.com/IGreatlyDislikeJavascript/bootstrap-tourist#trigger-when-modal-closes

[redelement]

@IGreatlyDislikeJavascript it does solve my original problems, however I ran into more theme specific problems that just make this incompatible with my project so I ended up using a different plugin. For anybody using vanilla Bootstrap 4 I believe your fork will solve the issue.

[ckgagan]

Yeah I faced the same problem. It is because of the fade class. Bootstrap modal adds fade class in its modal element. Bootstrap tour has a css property where fade class has opacity of 0, so we do not see the bootstrap modal but just the backdrop. If we remove the fade class from Bootstrap modal, then it should work fine. OR the tour plugin must use another class instead of fade.

[PsychoIndigo]

Damn! Thank you! 🖤🧡🖤

Sent from Yahoo Mail on Android

On Tue, Oct 6, 2020 at 10:38 PM, Gagan Shresthanotifications@github.com wrote:

Yeah I faced the same problem. It is because of the fade class. Bootstrap modal adds fade class in its modal element. Bootstrap tour has a css property where fade class has opacity of 0, so we do not see the bootstrap modal but just the backdrop. If we remove the fade class from Bootstrap modal, then it should work fine.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[alanish08]

Yeah I faced the same problem. It is because of the fade class. Bootstrap modal adds fade class in its modal element. Bootstrap tour has a css property where fade class has opacity of 0, so we do not see the bootstrap modal but just the backdrop. If we remove the fade class from Bootstrap modal, then it should work fine. OR the tour plugin must use another class instead of fade.

Thanks man

[super1zero]

One solution that might work is to use specific stylesheet to specific part of html i.e for bootstrap-tour use bootstrap-tour stylesheet and leave rest as it is: https://stackoverflow.com/questions/45572399/applying-a-stylesheet-to-only-a-certain-region-of-an-html-file