Add modals…

CiviCRM uses lots of modals, and many of them use JQuery, some use Bootstrap…

This will require a bit of care to differentiate between the types of modals - some might look different because the contents are different but the JS, html & css is the same. Others might look the same but are doing something completely different!

Some places you can find modals:

• Contributions page dashboard, click view or edit next to any Contribution (two different modals but both I think use the same markup)
• On a contribution record (ie civicrm/contact/view?reset=1&cid=1), many of the tabs have a button 'add membership' or 'add event participant'
• Custom fields (ie /civicrm/admin/custom/group?reset=1) - inside a custom fields group, any new custom field is in a modal
• Navigation menu editor (/web/civicrm/admin/menu?reset=1). This has a double modal - if you try to create a new menu link and then select an icon, a second modal appears.

Things to look at with a modal:

• the div that makes the background darker. it might also position the modal on the screen
• the container / border of the modal
• the header of it with the close/expand icons in the right
• the footer of it with actions
• any scroll action if it's too long - you can see this with the Icon modal above.