Popup
Usage
A popup or modal is a user interface (UI) element that appears on top of the main content, requiring user interaction before they can return to the main page.
Popup
When you create an element to trigger the popup, make sure to add the attributedata-popup-trigger with the id of the element you want to popup.
html
<button data-popup-trigger="#popup">Open Popup</button>When creaing the popup, make sure to add the attribute data-popup to the main div. The popup uses the custom attributes auto-close to enable the user click outside the popup area to close the popup, cancel on an element inside the popup to enable the user close the popup by clicking the specified element. The code snippet for the popup above.
html
<div data-popup id="popup" auto-close>
<div class="popup">
<section class="popup-header">
<span>Edit User</span>
<span class="u-icon u-icon-24" cancel>multiply</span>
</section>
<section class="popup-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis ut molestiae praesentium dignissimos blanditiis nulla perferendis vero. Nisi facilis, deleniti vero accusantium, debitis vitae tempora, cupiditate iure totam nobis sapiente aliquid natus velit ex dolorem corrupti exercitationem quisquam temporibus reiciendis. Ipsum pariatur asperiores eligendi distinctio cumque repudiandae possimus quaerat eius, vel provident molestiae dolore excepturi autem? Doloribus sequi culpa deleniti id, maxime debitis omnis quos odio natus, est vel eos quasi aspernatur odit deserunt, architecto hic libero optio quod exercitationem? Consequuntur reprehenderit ratione molestiae nulla, magnam tenetur veritatis, accusamus dolorum, consequatur beatae mollitia esse modi iure animi accusantium natus nemo ea perspiciatis quae ab eius a hic quisquam! Aliquam corporis illum ut! Amet inventore unde odit doloribus rerum pariatur provident labore, ab perferendis, distinctio sed consequuntur. Eveniet quis, eum officiis illo incidunt corporis obcaecati eligendi aliquid dignissimos culpa recusandae voluptas magnam quam aliquam quos vero ea ipsum enim iusto. A aperiam, quibusdam sit assumenda perferendis tempora inventore, dolorum voluptatem libero nostrum doloribus possimus nesciunt, aliquid placeat. Eos explicabo maiores distinctio. Tempora rerum nisi nobis assumenda nam explicabo ipsam facilis labore commodi sint maxime temporibus vero, eligendi, ut, atque voluptate eaque repellendus expedita! Obcaecati nesciunt quo sint labore. Saepe aliquam porro ut delectus a quisquam reiciendis eos at, voluptates assumenda veritatis voluptas possimus cumque hic praesentium! Reiciendis sapiente accusamus exercitationem asperiores nobis nisi qui. Quam magni maxime accusantium, quod dicta fugiat sapiente vitae ad, corporis, molestias quia animi expedita fugit sit voluptas minus vel aliquam! Rem quibusdam, adipisci voluptate accusantium quod, ab aperiam dolores repellendus facilis eligendi earum ipsa, exercitationem ratione praesentium. Magni inventore minima quos dignissimos, esse dolores dolorem dicta molestias nesciunt fuga at qui neque soluta corrupti vitae, modi facilis nisi fugiat maxime, cupiditate iusto autem. Veniam veritatis commodi tempore porro ullam asperiores, quis sed distinctio cum libero eius repellat quibusdam totam in quae delectus, doloribus nihil! Cumque, earum illo. Hic eaque temporibus ad expedita, deserunt aspernatur commodi soluta rerum voluptate? Officia, corrupti voluptatibus! Non ullam in sequi fuga tempore ducimus deleniti neque excepturi expedita nobis ab quam, sunt id officiis quaerat rem praesentium qui harum inventore consequuntur a cum. Delectus numquam inventore hic exercitationem ab voluptas rerum optio quae ut, aut libero, corrupti, est corporis obcaecati consequuntur! Impedit sequi ipsa, explicabo magnam, accusantium blanditiis velit quod at sapiente perspiciatis nostrum. Quo obcaecati debitis consequuntur libero alias fugit enim iusto nostrum accusantium quod sit commodi, nesciunt qui adipisci saepe. Earum blanditiis assumenda incidunt eum impedit explicabo placeat qui suscipit cum mollitia, aspernatur perferendis facilis non soluta est nostrum sit nesciunt nihil, quisquam nemo temporibus quos dicta? Voluptas blanditiis repudiandae, quibusdam dignissimos soluta fugiat, id architecto corporis officia dolore exercitationem amet itaque suscipit? Aperiam excepturi quas non facere provident accusantium modi tenetur obcaecati sint, laboriosam dolorem cupiditate vitae nihil blanditiis ipsam error enim libero nobis minus doloribus dolore possimus est hic. Recusandae eius quibusdam unde ab incidunt itaque quas enim ut in eaque, voluptas dolore dicta id quia? Cumque distinctio minima delectus at ad repellendus magni repudiandae beatae blanditiis perferendis repellat, accusantium quod, explicabo itaque aut. Totam qui adipisci aspernatur similique asperiores delectus voluptates alias debitis error omnis. Placeat laboriosam nesciunt similique, hic facere, incidunt ratione maxime eaque eligendi ducimus tenetur quibusdam fugit ipsum aliquam id, ab aperiam voluptatibus beatae doloremque illo magni quasi. Quisquam quibusdam enim in dolor sapiente? Mollitia blanditiis quis similique vitae qui dignissimos dolores eveniet impedit inventore, corrupti, sapiente vel eius distinctio libero autem rerum fugiat provident aperiam neque natus sunt ratione quo! Doloribus quae facilis voluptatibus culpa pariatur? Doloremque asperiores officia repudiandae, velit dolorem laborum vel corrupti quia sint omnis beatae saepe soluta et cum dolore itaque illum. Sapiente quo iure laudantium, autem ipsum asperiores, animi ipsa nesciunt commodi fugiat et perspiciatis atque quos explicabo, accusantium totam rerum sit sint voluptatum illo amet. Id ut blanditiis asperiores hic dolore odit alias vel! Quae illo maiores provident sed at ex neque nostrum, praesentium autem voluptatem velit repellendus recusandae adipisci facilis asperiores quia cumque sit corrupti qui porro est. Corrupti autem dicta fugit provident natus, sint placeat ipsa dolore error impedit. Tempora voluptate esse vel consequatur omnis earum inventore nemo ipsum quis voluptatum? Doloribus ex, voluptatibus laboriosam impedit minima doloremque ad cum quidem? Unde molestiae atque quisquam illum ratione aperiam iusto est iure libero maxime nobis totam omnis aspernatur explicabo sapiente nam numquam, quidem delectus error tempore? Numquam cumque doloribus libero molestiae eum modi delectus, quasi eaque tempora suscipit rerum quo? Ipsum quidem asperiores officiis eius enim ad beatae eum, veritatis quo quaerat, sint iste quia accusantium perferendis reiciendis? Veniam deserunt perferendis ex facere cum asperiores nulla, nam necessitatibus beatae! Cupiditate quia magni, voluptates quos, expedita officia eos quasi deleniti eligendi, libero labore tenetur id repudiandae dolor quisquam accusamus aut autem? Explicabo nesciunt quo reiciendis necessitatibus fuga dolorem expedita porro ipsum nostrum voluptatibus, dolores, accusamus odit provident autem unde eos incidunt ab quisquam sit ut eligendi atque blanditiis soluta qui. Voluptas expedita modi excepturi reiciendis nihil, laboriosam vitae, nobis optio enim esse eum ipsa ipsum nulla laborum. Ipsum nihil molestias est adipisci sapiente ex quia suscipit rerum facere? Aperiam exercitationem, nihil doloribus nobis earum dolore, ad veniam, libero dolores neque omnis aliquid velit sequi eaque dolorum. Praesentium nobis tempora id consequatur voluptatum consequuntur cumque aut. Laboriosam pariatur, animi minus odit vitae placeat maiores mollitia delectus non quod harum beatae enim culpa in ex hic deleniti adipisci natus tempore quis consequuntur. Quos iusto vitae laudantium eligendi illum nihil quam repudiandae debitis voluptas esse? Nulla, dolor cum. Ducimus, explicabo repudiandae. Sapiente enim nisi magnam culpa error, eligendi, soluta omnis dolore iusto officiis ratione, illum dolorem officia eos voluptates recusandae est. Accusamus deserunt minima officiis eos tempore itaque at voluptate aliquam tempora reiciendis veniam, voluptatem, ad animi aspernatur laborum ratione inventore aliquid autem. Ullam voluptas minima quasi quidem. Praesentium odio quas doloremque accusamus ipsa deserunt ut, ducimus quia sed soluta optio similique. Est magni aperiam numquam nam dolorem. Beatae earum illum placeat nam repudiandae impedit optio, culpa facilis consequatur laborum quam deserunt nobis iste? Maiores, atque exercitationem, delectus eaque, totam sit laudantium porro possimus vitae perspiciatis sed aspernatur est nemo error aliquam natus laborum voluptate ullam fuga ea magni vel eos facere! Iure vitae eligendi deserunt, et illo non saepe exercitationem, autem nihil dolor repudiandae omnis modi? Aliquam, perspiciatis laboriosam amet voluptates ea deleniti veniam cupiditate beatae! Amet tempore veritatis quibusdam veniam qui nihil nostrum quidem dolor, voluptatibus aperiam repellendus ea vel non expedita ipsum cumque illo! Explicabo dolores repellendus quidem placeat amet incidunt fugiat velit odit, ea ratione vitae hic dicta? Autem ea accusamus quos, consequuntur quas, consectetur nisi ullam soluta quaerat sit recusandae voluptatibus nulla? Illum deserunt obcaecati, eos eaque in pariatur. Dignissimos sint aut vel assumenda quia eaque distinctio laborum eius. Itaque non dolorum odio iure quae ratione magni aliquam exercitationem consequatur, labore vitae in magnam beatae excepturi maiores aut. Dicta, vero commodi ipsa perferendis fugit voluptatum voluptas quibusdam, alias asperiores, cupiditate ipsam? Itaque, perspiciatis. Similique, ratione! Ut, et vitae temporibus fugit, rem tempore consequuntur voluptate beatae hic, aspernatur explicabo eius molestias dolor odit. Recusandae ad nulla modi optio mollitia suscipit id quaerat dolores ipsum accusamus itaque sint dolor, tenetur voluptas aspernatur nihil ex deleniti assumenda voluptate rerum? Tempora saepe minima repudiandae et ad nisi maxime dolorum quisquam sed quibusdam ipsum aperiam, debitis pariatur modi incidunt exercitationem! Veniam non, quas deleniti et aperiam ipsum eum odit mollitia accusantium natus soluta ullam error voluptatem reprehenderit tenetur nulla voluptatibus porro voluptatum reiciendis! Qui, eaque eos provident ut nihil cum doloribus velit ipsam dolore eligendi officia molestiae aspernatur reprehenderit mollitia quis ducimus quasi? Et exercitationem, eum alias inventore in explicabo rerum facere. Nam harum temporibus facilis voluptatibus porro corporis eum molestias consequatur beatae officiis id optio assumenda, reiciendis quo possimus perspiciatis dignissimos recusandae expedita! Maxime quam veniam tempora molestias voluptates totam deleniti adipisci corporis, aperiam iusto distinctio quo in saepe. Modi ipsam ea voluptate explicabo repellat? Iusto obcaecati error esse debitis reprehenderit cum vero adipisci. Labore aspernatur, autem sint eum ipsa dolorem nobis eligendi animi ad corrupti. Facilis ad minus dolorum ipsam ipsa, atque voluptatum voluptatem aut eligendi provident magni, incidunt dolor minima quo eos. Quo corrupti consequuntur minima inventore architecto quia iste officiis sapiente numquam consectetur fugiat dolorem possimus hic id ab, ipsum aliquid laudantium ut doloremque deleniti sed laborum a rem similique. Dolor velit magnam reiciendis est, inventore, doloremque ducimus, sapiente officia quas placeat ratione excepturi perferendis. Eos, possimus, atque nesciunt culpa, eum similique expedita explicabo nihil maxime perspiciatis veritatis? Quidem reprehenderit, alias harum aspernatur asperiores quisquam laborum voluptatibus officia optio ab mollitia earum. Est, eius? Minima sit voluptas minus illum magni, sint quisquam placeat necessitatibus, quis nostrum reiciendis ad accusantium harum reprehenderit tempore quod amet saepe alias rem commodi neque aut deleniti voluptatibus. Ea consectetur tempora doloremque dolores non fugit autem dolore cupiditate quibusdam sunt inventore culpa atque, incidunt laboriosam nihil ipsam dicta totam aliquid. Architecto voluptatum sed reiciendis sapiente porro explicabo adipisci, doloremque itaque facilis dolorum ex sunt praesentium ut quam neque dolor iusto fuga quis eos ullam, ea laboriosam, deserunt dolorem velit. Aut tenetur doloribus cupiditate quaerat esse consequatur expedita officiis nesciunt cumque, veniam nostrum minus rem quia reiciendis voluptas ab officia repellat optio vel facilis eos delectus dolores modi iste. Eius dignissimos quos enim veniam impedit nisi tenetur totam aperiam dolore, temporibus nesciunt tempora et praesentium explicabo vel magnam iste quam repudiandae nihil natus quibusdam soluta accusantium ratione eos! Magnam rem minus laboriosam sunt nostrum perspiciatis facere veritatis autem necessitatibus itaque nisi, corrupti eligendi commodi recusandae rerum laudantium, odit, temporibus magni quidem voluptatum esse! Consequuntur ullam maiores consequatur aliquam omnis, autem minus, itaque animi aspernatur quis, possimus numquam mollitia harum vero asperiores maxime neque corrupti rerum velit nulla ut doloribus! Iste repellat, eos expedita odit, sequi neque illum minus obcaecati facilis, molestiae in eius incidunt nesciunt accusantium quisquam. Suscipit harum deserunt ab in aperiam consectetur iusto quibusdam mollitia dicta ex sint, quis dolorem ducimus, non cum illum at alias nemo autem recusandae vitae laboriosam doloremque laudantium ullam. Vel voluptate rerum est quasi tempore provident eos, reiciendis distinctio explicabo, ea consectetur totam illo ullam obcaecati itaque officia nihil dolorum incidunt dignissimos ipsa error cumque vitae! Consectetur vel beatae magnam excepturi iusto sequi fugiat iste eos sunt veritatis nisi autem et at neque quae quod maiores amet incidunt deleniti quos eum quidem, adipisci nemo? Vero aut aperiam quis veritatis at nemo fugit. Laboriosam incidunt minima necessitatibus beatae quisquam exercitationem in, deserunt nesciunt quidem. Nemo odio nostrum necessitatibus eius tempora reprehenderit obcaecati delectus voluptate soluta architecto quia placeat a rem ipsam aspernatur, ducimus laudantium vel quisquam itaque minima officiis reiciendis. Quae similique et quisquam pariatur cupiditate consectetur minus. Harum architecto necessitatibus id! Ullam, repudiandae eum tempore rerum, officiis, ipsam beatae eligendi optio eaque et commodi! Esse, at labore veniam commodi, reprehenderit adipisci suscipit, atque consectetur impedit eos aut. Eligendi laudantium soluta eum facilis accusantium vero fuga laborum excepturi quos reiciendis magnam at voluptas architecto iste deserunt, repellendus quia rerum rem veritatis, nobis ut ducimus dignissimos! Consequuntur, temporibus voluptas deserunt veritatis incidunt distinctio magnam. Iusto, illo non numquam minus fuga dolor veniam, repudiandae quam a odio cum harum! Porro soluta eos consequuntur, iusto ipsum explicabo provident? Nesciunt sapiente cupiditate molestiae excepturi, unde blanditiis praesentium assumenda modi quaerat aperiam nobis. Ullam perferendis iste quis a blanditiis exercitationem fugiat dicta voluptate voluptatem? Veritatis totam ipsa enim sapiente, quisquam sint et? Fugit consectetur unde, mollitia omnis quaerat illum at fugiat itaque dolorum saepe voluptas nulla dolores voluptatem laudantium fuga ex quidem animi similique, ipsum repellat! Cumque aut dicta hic, ducimus iure ut mollitia quos nam explicabo eum! Repellat, totam veniam, quidem amet omnis quibusdam odio a ea dolorum tempore quia quod illo nam est sint laudantium alias corporis soluta dolor ut voluptatibus. Ratione, recusandae laborum minus iste temporibus dolorum velit amet impedit laudantium accusamus dolorem dolores similique tempore! Iure harum, rem ea dolor ipsum perferendis et est dolorum necessitatibus nulla eius, tenetur culpa quaerat quibusdam, explicabo rerum. Maxime aperiam sequi quod assumenda placeat eveniet tempore voluptates porro, maiores eum, quia cupiditate fugit eos atque, quos eaque sapiente voluptatem natus harum illum!
</section>
<section class="popup-footer space-between">
<button cancel class="flat button-small">Cancel</button>
<div class="flex gap-2">
<button disabled class="button-small outlined">Back</button>
<button cancel class="button-small">Next</button>
</div>
</section>
</div>
</div>NB: In cases where data-popup-trigger is not available on DOMContentLoaded, you must manually reinitialise the popup by calling UIhub.services.modalService.reInitModals()
Using the API
See more details on api in installation
javascript
UIhub.services.modalService.triggerPopup("#popup");Customisation
css
[data-popup] {
--popup-header: 60px;
--popup-footer: 80px;
--popup-header-text-color: #fff;
--popup-header-background-color: var(--primary-clr);
--popup-max-width: 600px;
--popup-max-height: 600px;
--popup-z-index: 1000000;
}