The example i'm thinking of uses a modal to display a list of saved references. The secondary action for this would be to email this list (to yourself or to share).

Both of these actions (displaying list of references and emailing form) are currently modal windows.

My thoughts are:

  • that it should be in one modal with steps displayed in this modal
  • displays the references on a new page (not using any modals) – overlay modals
  • Here is a perfect example of a similar question posted before: ux.stackexchange.com/questions/37026/print-options-dialog
    – Eliot Hill
    Apr 11, 2016 at 15:40
  • 1
    @Elliot, the accepted answer on that question is based on a very difficult specific situation and is probably too convoluted for a simple answer, not to mention it doesn't deal with the OP's problem at hand
    – Devin
    Apr 11, 2016 at 17:51
  • @EliotHill mockups would help! Apr 16, 2016 at 21:22

4 Answers 4


How about if you used a drawer-type interface (from material design) for the references, with a modal for the activity of emailing it to yourself, or sharing it on social media?

In the main layer, the user is presented with the text of the article. When they hover over the reference number in the text, they get a popup with the details of the reference, and a button saying "save reference".

modal to allow user to save the reference

In the drawer layer, accessed by clicking on the hamburger icon at top left, they get to see their list of saved references (this could also have buttons for sharing them on social media, deleting them, exporting them to EndNote, emailing them to yourself or a friend, or whatever). The user would probably want to email all the saved references to themselves in one go, rather than one at a time.

viewing the saved references drawer

Although this is a design for a mobile device, it can also be used on the web.


I think it is just a matter of layout you are using.

When I faced this problem of modal from modal, I converted it to something called card layout which slides back the previous content and opens new content on the same modal on a button click(Email, in your case). This is one way.

Another way to handle the situation you described in your example is to have a link button on the first modal itself for opening default email client with your desired content as below:

$(function () {
  $('.SendEmail').click(function (event) {
    var email = '[email protected]';
    var subject = 'Test';
    var emailBody = 'Hi Sample,';
    var attach = 'path';
    document.location = "mailto:"+email+"?subject="+subject+"&body="+emailBody+

copied from (this) link.

If it differs from your scenario, please help us with some screenshot or wireframe.


I would consider using a card flip action inside the modal to transition smoothly between content instead of using another modal. It would be a smoother transition and less jarring. Load all of your content in the modal and hide the secondary content. Then maybe a css transition/toggle to flip between content.

Maybe use this: https://nnattawat.github.io/flip/


If you really want to use modals for both of the steps, a good alternative to a modal calling another modal is to replace the content (so basically what you suggested in the solutions you provided).

The goal of a modal is creating an area for content that focuses users attention. So, if this is what you need, a new page doesn't make sense. What you need to analyze is if you really need in both cases the content in a modal.

I think you should read also the information from the Material Design guidelines:

Avoid dialogs launching dialogs

Confirmation dialogs should avoid launching additional simple dialogs or simple menus, as they add complexity and appear to increase an app’s elevation. If they are needed to complete a task, consider using a full-screen dialog instead.

In other words, you can consider two modals, but this is only if you really need it to complete a task.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.