I would like to use the Bourbon Refill modal component for a confirm dialog for records on an index page in my Rails app. The page lists users, along with a delete button for each one. When clicked, the delete button should trigger a modal window that prompts the user to confirm the deletion of the selected user. The modal should display things like the user’s name and maybe other relevant information. Looking at the example code for the modal (http://refills.bourbon.io/components/) it looks like I need to create a hidden div with the modal contents. So if I had 20 users displayed on the page each with a delete button and an associated confirm modal, I would need 20 hidden model divs. Is there a better way of doing this? I feel like I would end up with a lot of HTML if I had to generate one for each user.
I did some Googling and didn’t find much. I did find this for bootstrap:
Something like this would definitely reduce the amount of HTML that would need to be generated - everything is just stored in data attributes on the link/button and the modal is generated on the fly. I could fork this project and convert it to use Bourbon.
Does anyone have suggestions on this? I feel like is something that is relatively common feature.