Semantic-UI Popup Pre-Existing Type
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to make your website look more amazing. It uses a class to add CSS to the elements.
A Popup displays extra facts about the element to the user when he/she hovers over it. Semantic UI provides us with a styled popup. Let’s have a look at various Popup Pre-Existing Type Classes.
Semantic UI Popup Pre-Existing Type Class:
- popup: Creates a standard popup.
Syntax:
<div class="ui popup"> ... </div>
Example 1: In the below example, we have created a standard Pre-Existing Popup Type.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI Popup Pre Existing Type</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://code.jquery.com/jquery-3.1.1.min.js" integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > </ head > < body > < div class = "ui container" > < h2 class = "ui green header" >w3wiki</ h2 > < h4 >Semantic UI Pre Existing Type</ h4 > < hr > < br /> < div class = "ui button" data-position = "bottom center" > Display a pre-existing popup </ div > < div class = "ui popup" > I am a pre-existing popup </ div > </ div > < script > $('.button').popup() </ script > </ body > </ html > |
Output:
Example 2: In the below example, we have created a fluid pre-existing popup that takes up the entire width of the container.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI Popup Pre Existing Type</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://code.jquery.com/jquery-3.1.1.min.js" integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > </ head > < body > < div class = "ui container" > < h2 class = "ui green header" >w3wiki</ h2 > < h4 >Semantic UI Pre Existing Type</ h4 > < hr > < br /> < div class = "ui button" data-position = "bottom center" > Display a pre-existing popup </ div > < div class = "ui fluid popup" > < h3 class = "ui green header" >Pre-Existing</ h3 > < p >I am a pre-existing popup</ p > </ div > </ div > < script > $('.button').popup() </ script > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/modules/popup.html#pre-existing
Contact Us