I'm working on a single landing page where content had to be shown in a model box. also this content has more content under it. but it's too much to show all together in one modal box

i've to work with limitations due to the platform

1 these content needs to be shown on the same modal box

2 one modal box cant be linked to another one

usability wise i need to keep the length of the modal box within the size of the screen

at the same time i need to show quite a lot of the content. so the solution that might work would be to use an accordion for the additional information. besides accordions, what would be suitable patterns that would solve this problem?

enter image description here

  • let the content scroll within the modal and/or let the modal be as tall as possible and let the page scroll.
    – DA01
    Sep 6, 2015 at 18:14

2 Answers 2


Adding tab inside the modal will solve the issue to some extent. If the content is more then break it into sections and distribute to the tabs based on the requirement. Try to use simple tabs.

  • I considered this. however the number of links and the length of their labels goes longer than the width of the modal box.
    – Blue Ocean
    Sep 7, 2015 at 1:52
  • You will get lot of solution when you google on the multiple tab controls. Here is few suggestion 1. If the number of links are more then add arrow to show more tabs ( search on the google - multi tabs ) 2. If the tab title length is more then reduce the text and add three dots ( ... - ellipsis) I have given both the option, please choose whichever best suits for the requirement. Sep 7, 2015 at 6:36

I would suggest that you Divide Information into 3 or 4 meaning full sections and use VenoBox plugin to show NEXT and BACK arrows to slide through modal windows

Please have a look at it


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.