We all know that dialog box opens with a transparent background, But In latest design I have seen many dialogs opens in full page with a solid background with close button at the top right of the page. Let me know shall I follow latest design trends?

enter image description here

enter image description here


Overall this will simply be a design decision, there is no standard and it will depend entirely on what fits your application the best.

But I think if you break this in to two separate decisions, the background opacity and the location of the close button, it will be easier to decide. Surely a transparent background dialog can have a close button in the top right of the page just as well as a solid color, so there is no reason to consider the latter mutually exclusive.

Transparent Vs. Solid:

Is the underlying information pertinent to the decision the user must make in the dialog. Often a dialog may ask something like "Are you sure you want to delete this image?", if this is the case it may very well be helpful to leave the background overlay transparent so the user can see the image that this decision will affect. If however, this dialog pops up and says "You session is about to expire, click OK to continue", there is no need to show the underlying page because it is not relevant to the dialog, thus it may be a better choice to have a solid background to draw focus to the important message.

Close Button Location:

This one is truly more of a design choice. It will come down to what fits your content better. But some use cases I can think of:

  • If you want to direct your user to make one of the decisions on the modal as opposed to just closing it you can put the close button up in the top right of the page so they are less likely to click it then the decision buttons on the modal.

  • If the modal has full size content such as images it may look worse to put a big 'X' on it, so a better design is to move the 'X' off the modal to the top of the page.

  • If on mobile, your dialog box becomes full screen, it may be an easier design to leave the 'X' on the modal for consistency between devices, as opposed to figuring out how to move the close button from the overlay on desktop to the modal body on mobile.


In the end though there are no global guidelines or standards for how this should be done. Weigh each aspect and decide which part fits your application better.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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