UI KIT - modal

Developer
Leolo
Size
9,375 Kb
Views
46,552
  1. UI KIT - modal Previews
  2. UI KIT - modal HTML Codes
  3. UI KIT - modal CSS Codes
  4. UI KIT - modal JS Codes

How do I make an ui kit - modal?

What is a ui kit - modal? How do you make a ui kit - modal? This script and codes were developed by Leolo on 08 September 2022, Thursday.

UI KIT - modal Previews
IQ Test

UI KIT - modal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>UI KIT - modal</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modal - UIkit tests</title> <link rel='stylesheet prefetch' href='https://getuikit.com/assets/uikit/dist/css/uikit.css?nc=4207'>
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="uk-container"> <ul class="uk-dotnav uk-dotnav-vertical uk-position-center-left uk-position-fixed"> <li class="uk-active" title="kafana" uk-tooltip="pos: right"><a href="#">Kafana</a></li> <li title="Section" uk-tooltip="pos: right"><a href="#" >Item 2</a></li> <li title="Lection" uk-tooltip="pos: right"><a href="#">Item 3</a></li> <li title="Place" uk-tooltip="pos: right"><a href="#">Item 4</a></li> <li title="how long can one tooltip go? too long. maybe | I don't know. lets find out" uk-tooltip="pos: right"><a href="#modal-full" uk-toggle>Item 5</a></li>
</ul> <h1>Modal</h1> <div class="uk-child-width-1-3@m" uk-grid> <div> <h2>Objects</h2> <p uk-margin> <a class="uk-button uk-button-default" href="#modal" uk-toggle>Default</a> <a class="uk-button uk-button-default" href="#modal-sections" uk-toggle>Sections</a> <a class="uk-button uk-button-default" href="#modal-nobody" uk-toggle>No Body</a> <a class="uk-button uk-button-default" href="#modal-caption" uk-toggle>Caption</a> <a class="uk-button uk-button-default" href="#modal-close-outside" uk-toggle>Close Outside</a> <a class="uk-button uk-button-default" href="#modal-lightbox" uk-toggle>Lightbox</a> </p> </div> <div> <h2>Scrollbar</h2> <p uk-margin> <a class="uk-button uk-button-default" href="#modal-scrollbar" uk-toggle>Scrollbar</a> <a class="uk-button uk-button-default" href="#modal-overflow" uk-toggle>Overflow Auto</a> </p> </div> <div> <h2>Sizes</h2> <p uk-margin> <a class="uk-button uk-button-default " href="#modal-container" uk-toggle>Container</a> <a class="uk-button uk-button-default" href="#modal-expand" uk-toggle>Expand</a> <a class="uk-button uk-button-default" href="#modal-widths" uk-toggle>Widths</a> <a class="uk-button uk-button-default" href="#modal-full" uk-toggle>Full</a> <a class="uk-button uk-button-default" href="#modal-full-split" uk-toggle>Full Split</a> </p> </div> <div> <h2>Center</h2> <p uk-margin> <a class="uk-button uk-button-default" href="#modal-center" uk-toggle>Center</a> <a class="uk-button uk-button-default" href="#modal-center-scrollbar" uk-toggle>With scrollbar</a> </p> </div> <div> <h2>Group</h2> <p uk-margin> <a class="uk-button uk-button-default" href="#modal-group-1" uk-toggle>Modal 1</a> <a class="uk-button uk-button-default" href="#modal-group-2" uk-toggle>Modal 2</a> </p> </div> <div> <h2>Dialogs</h2> <p uk-margin> <a id="modal-dialog" class="uk-button uk-button-default" href="#">Dialog</a> <a id="modal-alert" class="uk-button uk-button-default" href="#">Alert</a> <a id="modal-confirm" class="uk-button uk-button-default" href="#">Confirm</a> <a id="modal-prompt" class="uk-button uk-button-default" href="#">Prompt</a> </p> </div> <div> <h2>Stack</h2> <p uk-margin> <a class="uk-button uk-button-default" href="#modal-stack-1" uk-toggle>Modal 1</a> <a class="uk-button uk-button-default" href="#modal-stack-2" uk-toggle>Modal 2</a> </p> </div> </div>
</div>
<div class="uk-container"> <p> <button class="uk-button uk-button-default" type="button" uk-toggle="target: #scrollbar">Toggle scrollbar</button> </p> <div id="scrollbar"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-child-width-1-2@m" uk-grid> <div> <div class="uk-inline uk-light"> <img src="https://unsplash.it/420/420/?random" alt=""> <div class="uk-position-center"> <span uk-overlay-icon></span> </div> </div> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <h2>Javascript Options</h2> <div class="uk-overflow-auto"> <table class="uk-table uk-table-striped"> <thead> <tr> <th>Option</th> <th>Value</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>center</code></td> <td>Boolean</td> <td>false</td> <td>Center the modal.</td> </tr> <tr> <td><code>container</code></td> <td>Boolean</td> <td></td> <td></td> </tr> <tr> <td><code>esc-close</code></td> <td>Boolean</td> <td>true</td> <td>Close the modal when <em>Esc</em> key is pressed.</td> </tr> <tr> <td><code>bg-close</code></td> <td>Boolean</td> <td>true</td> <td>Close the modal when background is clicked.</td> </tr> <tr> <td><code>stack</code></td> <td>Boolean</td> <td>false</td> <td>Stack modals, when more than one is open? By default, the previous modal will be hidden.</td> </tr> </tbody> </table> </div>
</div>
<div id="modal" uk-modal> <div class="uk-modal-dialog uk-modal-body"> <button class="uk-modal-close-default" type="button" uk-close></button> <h2 class="uk-modal-title">Headline</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p class="uk-text-right"> <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button> <button class="uk-button uk-button-primary" type="button">Save</button> </p> </div>
</div>
<div id="modal-sections" uk-modal> <div class="uk-modal-dialog"> <button class="uk-modal-close-default" type="button" uk-close></button> <div class="uk-modal-header"> <h2 class="uk-modal-title">Headline</h2> </div> <div class="uk-modal-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="uk-modal-footer uk-text-right"> <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button> <button class="uk-button uk-button-primary" type="button">Save</button> </div> </div>
</div>
<div id="modal-nobody" uk-modal> <div class="uk-modal-dialog"> <button class="uk-modal-close-outside" type="button" uk-close></button> <img src="https://unsplash.it/400/400/?random" alt=""> </div>
</div>
<div id="modal-caption" uk-modal> <div class="uk-modal-dialog"> <button class="uk-modal-close-default" type="button" uk-close></button> <div class="uk-modal-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="uk-modal-caption">Caption</div> </div>
</div>
<div id="modal-close-outside" uk-modal> <div class="uk-modal-dialog uk-modal-body"> <button class="uk-modal-close-outside" type="button" uk-close></button> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
</div>
<div id="modal-lightbox" class="uk-modal-lightbox" uk-modal> <div class="uk-modal-bar uk-position-top"> <button class="uk-modal-close-default" type="button" uk-close></button> </div> <div class="uk-modal-dialog"> <img src="https://unsplash.it/400/400/?random" alt=""> </div> <div class="uk-modal-bar uk-position-bottom"> Caption </div>
</div>
<div id="modal-container" class="uk-modal-container" uk-modal> <div class="uk-modal-dialog uk-modal-body"> <button class="uk-modal-close-default" type="button" uk-close></button> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
</div>
<div id="modal-expand" uk-modal> <div class="uk-modal-dialog uk-modal-body uk-width-1-1"> <button class="uk-modal-close-default" type="button" uk-close></button> <p>wakka wakka ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
</div>
<div id="modal-widths" uk-modal> <div class="uk-modal-dialog uk-modal-body uk-width-3-4@m uk-width-2-3@l uk-width-1-2@xl"> <button class="uk-modal-close-default" type="button" uk-close></button> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
</div>
<div id="modal-full" class="uk-modal-full" uk-modal> <div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport> <button class="uk-modal-close-full" type="button" uk-close></button> <div class="uk-width-xxlarge uk-padding-large"> <h1>Naranča müsli</h1> <p>Na tavici zagrijati naribane bademe i müsli, dodati marmeladu i ulje te miješati dok se ne stvori kompaktna, karamelizirana masa. Žlicom razmazati po dnu okrugle posude. Filetirati naranče i sitno ih narezati, u hladnoj vodi omekšati želatinu. Pomiješati slatko vrhnje, sok od limuna, naranče, postupno dodati želatinu i zasladiti po želji smeđim šećerom ili šećerom u prahu. Istući bjelanjke i dodati u kremu. Preliti preko badema i müslija te ostaviti da se ohladi najmanje 2 sata Ukrasiti svježim voćem.</p> </div> </div>
</div>
<div id="modal-full-split" class="uk-modal-full" uk-modal> <div class="uk-modal-dialog"> <button class="uk-modal-close-full" type="button" uk-close></button> <div class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle" uk-grid> <div class="uk-background-cover" style="background-image: url('https://unsplash.it/1200/1000/?random');" uk-height-viewport></div> <div class="uk-padding-large"> <h1>ARRIVAL</h1> <p class="editable">Čitav naš svijet je poput oceana tekuće materije. Svi njegovi rubovi i rubovi objekata koje percipiramo kao objekte sa čvrstim stjenkama samo su iluzija koju nam nameću naša ograničena osjetila. Odnosno, naša osjetila ili kakav god drugi instrumentarij izmislili kako bismo proširili područje vlastita opažanja, uvijek će ostati nedovoljno savršena i ograničena za druge dimenzije svijesti, dimenzije koje nadilaze materijalni svijet, prostor i vrijeme. No...zađemo li malo dublje u smisao i bit ljudskog postojanja shvatiti ćemo da postoje i drugi načini komunikacije i opažanja kudikamo suptilniji od onih kojeg čovjek može dosegnuti sa svojih pet čula, a to su oni putem univerzalne svijesti. Naime, mi kao ljudska bića nismo izolirani od ostatka svijeta i svemira. Uronjen u nevidljivu vibraciju polja ovog svemira čovjek je smisleno povezan s svime što ga okružuje i sa svime što postoji i što je ikada postojalo, a što dolazi iz istog praiskonskog izvora...pa na jednoj dubljoj, duhovnijoj i svjesnijoj razini čovjek ipak može osjetiti tu vibraciju.
Zen budisti ovo su davno spoznali tj. da su kreacija i sav univerzum proizašli iz jednog izvora. Na sličan način i mnogi lingvisti smatraju da mnoštvo postojećih jezika ima zajednički izvor, odnosno materinji jezik od kojeg su svi jezici potekli. Tj. tu se oni slažu, pa isto kao i zen budisti, mnogi lingvisti vjeruju da je to bio sanskrt jer je to jezik koji u sebi ima mnogo zvučnih vibracija od kojih je jedna izvorna - prazvuk Om. Om je dakle prvotna i iskonska kozmička vibracija, duhovna zvučna vibracija svemira. Ali vrijedi i obrnuto, Om je i prvotni slog koji kada se ponavlja oslobađa um ili svjesnost i dovodi osobu do viših stanja svijesti.
Zato, kada se svijest jednog lingviste i duhovnog tragaoca spoji u stanju ne samo da čuje kozmički zvuk Om nego i da osjeti njegovu prisutnost u svakoj stanici svog bića i svakom djeliću vibrirajuće materije u koju je uronjen, njegova duša postaje sjedinjena sa svojom transcendentnom prirodom. Njegova svijest istovremeno vibrira u njegovom tijelu, u sferi zemlje, planeta, univerzuma i u svakoj čestici materije, prostora ili astralne manifestacije nekih čudnih bića...a to je i upravo ono što je režiser napravio sa svojom glavnom glumicom. I tako...što još reći osim da sjedeći negdje oko sat i pol u marku i slušajući nešto što liči tim primordijalnim zvukovima svemira i sama osjetih dodir te vibracije u svom intimnom celebralnom prostoru.
Za kraj ovog pregleda željela bih još napisati da je zajedno sa skladateljem Johann Johanssonom Dennis Villeneuve napravio malo umjetničko djelo koje gotovo da ima duhovne konotacije. Tibetanskim rogovima i bubnjem koji kao da označavaju početak i kraj svake nove mantre Oma, stavljaju nas u jedno meditativno stanje na kraju kojeg se osjećamo omamljeno kao da smo upravo izronili iz plutajućeg prostora primordijalnih kozmičkih vibracija.
Koristeći 12. lebdećih objekata (kako lijep broj) nadvivenih nad planetom, vibraciju Oma, kaligrafiju i filozofiju Zen budizma u kojoj je krug (Ensō) način da se izrazi trenutak kada um oslobađa tijelo da slobodno stvara...Villeneuve je nekako našao načina da iznova oživi sjećanje na vibraciju od koje smo svi potekli...pa si i sama nekako osjećam da će ovaj filmić i u meni još dugo rezonirati.</p> </div> </div> </div>
</div>
<div id="modal-center" uk-modal="center: true"> <div class="uk-modal-dialog"> <button class="uk-modal-close-outside" type="button" uk-close></button> <img src="https://unsplash.it/200/300/?random" alt=""> </div>
</div>
<div id="modal-center-scrollbar" uk-modal="center: true"> <div class="uk-modal-dialog uk-modal-body"> <button class="uk-modal-close-default" type="button" uk-close></button> <h2>My Name is Red by Orhan Pamuk</h2>
<p>
As I regarded the work, I slowly sensed that the underlying tale was the picture itself. The painting wasn't the extension of a story at all, it was something in its own right. -- Orhan Pamuk</p>
<p>
Before the art of illumination there was blackness and afterward there will be blackness. -- Orhan Pamuk
</p><p>
Allah created this earthly realm so that, above all, it might be seen. Afterward, He provided us with words so we might share and discuss with one another what we've seen. We mistakenly assumed these stories arose out of words and that illustrations were painted in service of these stories. Quite to the contrary, painting is the art of seeking out Allah's memories and seeing the world as He sees the world. -- Orhan Pamuk
</p><p>
In all of Venice, rich and influential men wanted their portraits painted as a symbol, a momenta of their lives and a sign of their riches, power and influence - so they might always be there, standing before us, announcing their existence, nay, their individuality and distinction. -- Orhan Pamuk
</p><p>
A great painter does not content himself by affecting us with his masterpieces; ultimately, he succeeds in changing the landscape of our minds. Once a miniaturist's artistry enters our souls this way, it becomes the criterion for the beauty of our world. -- Orhan Pamuk </p><p>
Tell me then, does love make one a fool or do only fools fall in love? -- Orhan Pamuk</p> <h4>What is art, great art?</h4>
<p>
Great artists would illustrate the word of God, but their names were never known. The illustrator was merely an instrument to bring forth the work of God. To stamp ones own identity was to usurp God, to be identified with the work was seen as vanity, if not blasphemy.
The illustration was to put into images the words. Later this was also used to illustrate epic works.
If a painting was seen on its own, what works was it used to illustrate, what words were to be drawn from the painting?
It was only much later, that art was seen for its own sake, that artists put a name to their work.
This is the dilemma that Orhan Pamuk portrays in My Name is Red.
Three parables told by 'Butterfly', 'Stork' and 'Olive' expand a treatise on the philosophy of art.
To be completed by 1591, Ottoman Sultan Murat III commissioned a great work that was to depict his life's work.</p>
<p>
In Europe, noblemen and others of self-importance had paintings done of themselves for posterity. Within their painting would be articles representing their life, so anyone viewing the portrait would not only be able to recognise the person but also their place and importance in society.
Ottoman Sultan Murat III took this one stage further, commissioned in secret a great book that would illustrate his life.
<p>
Each chapter in My Name is Red (Benim Adim Kirmizi) gives voice to a different character. It starts with the murdered master Elegant Effendi speaking to us from the afterlife.
<p>
It is not though only the dead who speak, a dog, a tree, a horse, even a gold coin, have a tale to tell. Even Satan tells his tale of his fall from grace and his status as a fallen angel.
<p>
Underlying the clash of different interpretations of art is a clash of Western and Eastern Civilisations. My Name is Red is more than a treatise on the philosophy of art, it is a love story, a murder mystery, a criticism of religious fundamentalism, but above all, a beautifully written novel.
Comparisons have inevitably been made with The Name of the Rose, the debut novel of Umberto Eco. Comparisons could also be drawn with The Glass Bead Game by Hermann Hesse.
<p>
My Name is Red was awarded the prestigious International IMPAC Dublin Literary Award in 2003, as well as the French Prix du meilleur livre étranger and Italian Premio Grinzane Cavour awards in 2002.
A very powerful novel..</p> </div>
</div> <div id="modal-full" class="uk-modal-full" uk-modal> <div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport> <button class="uk-modal-close-full" type="button" uk-close></button> <div class="uk-width-xxlarge uk-padding-large"> <h1>Expediamus</h1> <p>Na tavici zagrijati naribane bademe i müsli, dodati marmeladu i ulje te miješati dok se ne stvori kompaktna, karamelizirana masa. Žlicom razmazati po dnu okrugle posude. Filetirati naranče i sitno ih narezati, u hladnoj vodi omekšati želatinu. Pomiješati slatko vrhnje, sok od limuna, naranče, postupno dodati želatinu i zasladiti po želji smeđim šećerom ili šećerom u prahu. Istući bjelanjke i dodati u kremu. Preliti preko badema i müslija te ostaviti da se ohladi najmanje 2 sata Ukrasiti svježim voćem.</p> </div> </div>
</div>
<div id="modal-scrollbar" uk-modal> <div class="uk-modal-dialog uk-modal-body"> <button class="uk-modal-close-default" type="button" uk-close></button> <p class="editable">Mirisi ljeta u san mi dođu, samo još nekad pomislim na te. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
</div>
<div id="modal-overflow" class="uk-modal-container" uk-modal> <div class="uk-modal-dialog"> <button class="uk-modal-close-default" type="button" uk-close></button> <div class="uk-modal-header"> <h2 class="uk-modal-title">Headline</h2> </div> <div class="uk-modal-body" uk-overflow-auto> <p>Namisli dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="uk-modal-footer uk-text-right"> <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button> <button class="uk-button uk-button-primary" type="button">Save</button> </div> </div>
</div>
<div id="modal-group-1" uk-modal> <div class="uk-modal-dialog"> <button class="uk-modal-close-default" type="button" uk-close></button> <div class="uk-modal-header"> <h2 class="uk-modal-title">Headline 1</h2> </div> <div class="uk-modal-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="uk-modal-footer uk-text-right"> <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button> <a href="#modal-group-2" class="uk-button uk-button-primary" uk-toggle>Sljedeći</a> </div> </div>
</div>
<div id="modal-group-2" uk-modal> <div class="uk-modal-dialog"> <button class="uk-modal-close-default" type="button" uk-close></button> <div class="uk-modal-header"> <h2 class="uk-modal-title">Perikard 2</h2> </div> <div class="uk-modal-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="uk-modal-footer uk-text-right"> <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button> <a href="#modal-group-1" class="uk-button uk-button-primary" uk-toggle>Previous</a> </div> </div>
</div>
<div id="modal-stack-1" uk-modal> <div class="uk-modal-dialog"> <button class="uk-modal-close-default" type="button" uk-close></button> <div class="uk-modal-header"> <h2 class="uk-modal-title">Headline 1</h2> </div> <div class="uk-modal-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="uk-modal-footer uk-text-right"> <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button> <a href="#modal-stack-2" class="uk-button uk-button-primary" uk-toggle>Next</a> </div> </div>
</div>
<div id="modal-stack-2" uk-modal="stack: true"> <div class="uk-modal-dialog"> <button class="uk-modal-close-default" type="button" uk-close></button> <div class="uk-modal-header"> <h2 class="uk-modal-title">Headline 2</h2> </div> <div class="uk-modal-body"> <p class="editable">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="uk-modal-footer uk-text-right"> <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button> </div> </div>
</div>
<a href="#" id="back-to-top" title="Back to top">&uarr;</a>
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://getuikit.com/assets/uikit/dist/js/uikit.js?nc=4207'></script>
<script src='http://cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

UI KIT - modal - Script Codes CSS Codes

#back-to-top { position: fixed; bottom: 40px; right: 40px; z-index: 9999; width: 32px; height: 32px; text-align: center; line-height: 30px; background: #f5f5f5; color: #444; cursor: pointer; border: 0; border-radius: 4px; text-decoration: none; transition: opacity 0.2s ease-out; opacity: 0;
}
#back-to-top:hover { background: #e9ebec;
}
#back-to-top.show { opacity: 1;
}
#content { height: 2000px;
}
h2 { color: black; text-decoration: none; font-size: 1.4em; position: relative;
}
h2:before { content: ""; position: absolute; width: 50%; height: 2px; bottom: -5px; border-bottom: 1px solid #000; transform: scale(0, 1); transition: transform 0.4s;
}
h2:hover:before { transform: scale(1);
}
.uk-dotnav { left: 10px;
}
::-webkit-scrollbar { width: 7px; height: 7px;
}
::-webkit-scrollbar-thumb { background-color: #fcebd5; border: 2.5px solid #424242;
}
::-webkit-scrollbar-track { background-color: #424242;
}
.uk-modal-dialog { border-radius: 4px;
}

UI KIT - modal - Script Codes JS Codes

 (function() { $('#modal-dialog').on('click', function(e) { e.preventDefault(); $(this).blur(); UIkit.modal.dialog('<p class="uk-modal-body">UIkit dialog!</p>'); }); $('#modal-alert').on('click', function(e) { e.preventDefault(); $(this).blur(); UIkit.modal.alert('UIkit alert!').then(function() { console.log('Alert closed.') }); }); $('#modal-confirm').on('click', function(e) { e.preventDefault(); $(this).blur(); UIkit.modal.confirm('UIkit confirm!').then(function() { console.log('Confirmed.') }, function() { console.log('Rejected.') }); }); $('#modal-prompt').on('click', function(e) { e.preventDefault(); $(this).blur(); UIkit.modal.prompt('Name:', 'Your name').then(function(name) { console.log('Prompted:', name) }); }); })();
if ($('#back-to-top').length) { var scrollTrigger = 100, // px backToTop = function () { var scrollTop = $(window).scrollTop(); if (scrollTop > scrollTrigger) { $('#back-to-top').addClass('show'); } else { $('#back-to-top').removeClass('show'); } }; backToTop(); $(window).on('scroll', function () { backToTop(); }); $('#back-to-top').on('click', function (e) { e.preventDefault(); $('html,body').animate({ scrollTop: 0 }, 700); });
}
var editor = new MediumEditor('.editable');
var elements = document.querySelectorAll('.editable'), editor = new MediumEditor(elements);
UI KIT - modal - Script Codes
UI KIT - modal - Script Codes
Home Page Home
Developer Leolo
Username diomed
Uploaded September 08, 2022
Rating 3
Size 9,375 Kb
Views 46,552
Do you need developer help for UI KIT - modal?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Leolo (diomed) Script Codes
Name
Tabulous
IVolunteer
Parallax
Uikit cards
Vue-carousel-3d
Technical Documentation Page fCC
Week.plan
Web. ticker
Flexbox-timeline
Double-layer background
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!