[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fpages\u002Fmodals-and-popovers":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":196,"links":197,"dates":207},"\u002Fexamples\u002Fpages\u002Fmodals-and-popovers","collection","pages",true,{"example_count":9,"app_count":10},27933,541,{"id":12,"title":13,"description":14},34,"Modal & popover","Confused by 'Modal page design' in SaaS? Modals are content boxes that appear on top of the app, demanding attention for critical actions like confirmations or forms. Unlike less intrusive popovers, modals pause your workflow. They might also be called dialogs or lightboxes. Browse examples of Modal pages design from the best SaaS apps to see how they enhance user experience.",{"title":16,"description":17,"og_image":18},"Modal & popover page examples - Nicelydone","Modal & popover page design examples from SaaS websites. Confused by 'Modal page design' in SaaS? Modals are content boxes that appear on top of the app,…","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F294a83f0-4f57-4f4e-9151-0b58e6657cc1.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS marketing page examples","\u002Fexamples\u002Fpages",{"label":27,"to":4},"Modal & popover page examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI category","Modal & popover page design examples from SaaS websites. Confused by 'Modal page design' in SaaS? Modals are content boxes that appear on top of the app, demanding attention for critical actions like confirmations…",[32],{"title":33,"description":14,"links":34},"About Modal & popover",[],[36],"27933 marketing pages",[38,107,155],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"published_at":46,"kind":47,"patterns":48,"component_categories":72,"app":85},"294a83f0-4f57-4f4e-9151-0b58e6657cc1","Manage Account - Frame.io","Settings page where the user updates their invoice details like company name, billing email, and tax ID via a modal.","\u002Fexamples\u002Fapps\u002Fframeio\u002Fscreens",3024,1738,"Manage Account - Frame.io from Frame.io","2023-02-13T11:31:13.000Z","screen",[49,58,64],{"id":50,"label":51,"slug":52,"rank":53,"group":54},96,"Billing Settings","billing-settings",0,{"id":55,"label":56,"slug":57},10,"Settings & Admin","settings-and-admin",{"id":59,"label":60,"slug":61,"rank":62,"group":63},94,"Account Settings","account-settings",1,{"id":55,"label":56,"slug":57},{"id":65,"label":66,"slug":67,"rank":68,"group":69},11,"Edit","edit",2,{"id":68,"label":70,"slug":71},"Actions","actions",[73,77,81],{"id":74,"title":75,"slug":76},233,"Tabs","tabs",{"id":78,"title":79,"slug":80},284,"Modal","modal",{"id":82,"title":83,"slug":84},175,"Button","button",{"slug":86,"title":87,"logo":88,"baseline":89,"categories":90},"frameio","Frame.io","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fframeio-9d3a3d2a.png","The next generation of video collaboration.",[91,95,99,103],{"id":92,"title":93,"slug":94},100,"Video","video",{"id":96,"title":97,"slug":98},23,"Collaboration","collaboration",{"id":100,"title":101,"slug":102},35,"Feedback","feedback",{"id":104,"title":105,"slug":106},71,"File sharing","file-sharing",{"uuid":108,"title":109,"description":110,"canonical_path":111,"image":112,"width":113,"height":114,"image_alt":115,"published_at":116,"kind":47,"patterns":117,"component_categories":135,"app":141},"180bde68-17ec-448e-b4a0-d8267a48cb1c","Yoga style","Onboarding step where the user selects their fitness and wellness goals, like sleep, strength, and flexibility, from a scattered grid of circular options.","\u002Fexamples\u002Fapps\u002Fglo\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fglo_yoga-style_5d0c207a_nicelydone.png",2880,1534,"Yoga style from Glo","2020-06-30T12:48:15.000Z",[118,126,130],{"id":119,"label":120,"slug":121,"rank":53,"group":122},74,"Onboarding Checklist","onboarding-checklist",{"id":123,"label":124,"slug":125},7,"Onboarding & Education","onboarding-and-education",{"id":96,"label":127,"slug":128,"rank":62,"group":129},"Select","select",{"id":68,"label":70,"slug":71},{"id":131,"label":132,"slug":133,"rank":68,"group":134},72,"Getting Started","getting-started",{"id":123,"label":124,"slug":125},[136,140],{"id":137,"title":138,"slug":139},227,"Stepper","stepper",{"id":82,"title":83,"slug":84},{"slug":142,"title":143,"logo":144,"baseline":145,"categories":146},"glo","Glo","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fglo-599f48fc.png","When you feel good, it shows.",[147,151],{"id":148,"title":149,"slug":150},41,"Health and Wellness","health-and-wellness",{"id":152,"title":153,"slug":154},33,"E-Learning","e-learning",{"uuid":156,"title":157,"description":158,"canonical_path":159,"image":160,"width":161,"height":162,"image_alt":163,"published_at":164,"kind":47,"patterns":165,"component_categories":179,"app":184},"c02ac288-9d95-408c-85a2-899af030b9d2","Progress","App screen where the system displays a loading message while searching for photographers for the user to follow.","\u002Fexamples\u002Fapps\u002F500px\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F500px_progress_486383f6_nicelydone.jpg",2800,1544,"Progress from 500px","2016-07-21T08:09:42.000Z",[166,174],{"id":167,"label":168,"slug":169,"rank":53,"group":170},120,"Loading","loading",{"id":171,"label":172,"slug":173},12,"States & Feedback","states-and-feedback",{"id":175,"label":176,"slug":177,"rank":62,"group":178},115,"Empty State","empty-state",{"id":171,"label":172,"slug":173},[180],{"id":181,"title":182,"slug":183},240,"Horizontal navigation","horizontal-navigation",{"slug":185,"title":185,"logo":186,"baseline":187,"categories":188},"500px","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F500px-5f7e3460.png","The premier photography community",[189,192],{"id":62,"title":190,"slug":191},"Communities","communities",{"id":193,"title":194,"slug":195},31,"Photography","photography",[],[198,201,204],{"label":199,"to":200},"Frame.io design examples","\u002Fexamples\u002Fapps\u002Fframeio",{"label":202,"to":203},"Glo design examples","\u002Fexamples\u002Fapps\u002Fglo",{"label":205,"to":206},"500px design examples","\u002Fexamples\u002Fapps\u002F500px",{"published_at":164,"updated_at":208},"2026-09-27T00:00:08.544Z"]