Can you open a modal from another file (advice on approach)

[Cody_Biggs]

For my next project I am going to try to recreate the following:

Frontend Mentor | Crowdfunding product page coding challenge

I am currently just thinking and writing down how I am going to approach this, so there is no code right now. I am thinking the best way to handle those modals is to use bootstrap as I have been wanting to try the current bootstrap. I think the last bootstrap I used was bootstrap 3. Anyway, I have been searching and have not come across a way to do this. Is there a way to open a modal from another file?

Or my second thought if I am not able to do the above is:
have the modal hidden when the page is initially shown, and then use .modal("show") when the button is clicked. Would that work if using display:none? Just looking for any advice on the approach.

[bbsmooth]

Implementing modals correctly so that they are accessible is quite a bit of work. I believe within the next few years all browsers will officially support an accessible <dialog> element and then it will become much easier (but we aren’t even close yet).

If you are going to use bootstrap then I would definitely use their modal plugin. I did a quick accessibility check on it and it seems to work pretty well.

But if you want to roll your own and you want to do it correctly you’ll either need to read and implement the WAI-ARIA Authoring Practices for Modal Dialogs or borrow an accessible implementation that someone else has created.

As for your question, I’m not quite sure I understand what you mean by “open a modal from another file.” Can you explain a little more? Your second approach is generally how this is done. Have the element you are going to use for the modal hidden using display: none and then display it when needed.

[Cody_Biggs]

Well, my initial thought was putting modal html in another file instead of it being in the html with the rest of the website. So, when the button is pushed it would get the modal html from another html file

[bbsmooth]

Sure, there are ways to import the html from a separate file but that is sort of a separate topic from displaying a modal. To display a modal, the element you are using for the modal has to be in the DOM so you can display it. How you get it in there is up to you

[Cody_Biggs]

Appreciate it! I am sure I will have several questions when I get started. The plan for today is get the front page set up and styled, and then I will start on the modal tomorrow.