Modal dialogs on mobile - Back button

1. Should Back button close modal?
2. How do you trigger a modal with a button?
3. Where should modal buttons be placed?

Should Back button close modal?

When the modal dialog is open, pressing the back button closes it. On a multi-step modal dialog, the back button can even navigate backwards through the steps! On most web apps, pressing the back button while a modal dialog is open will navigate to the previous page, rather than closing the modal.

How do you trigger a modal with a button?

To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.

Where should modal buttons be placed?

In modals and dialogs, align the buttons to the right, or possibly consider a center alignment. Rationale: all major platforms (Windows & macOS) right-align the terminating actions buttons in modals/dialogs, users scan modals in a “Z” pattern (check out the “Gutenberg Diagram”).