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 use to make your website look more amazing. Semantic UI Modal displays content above the screen that temporarily blocks interaction with the main view of the site. We need to act according to the details provided by the modal. Semantic-UI Modal Active State is used for setting whether an active modal is visible on the page or not.
Semantic-UI Modal Active State class:
- UI active modal: This class is used for setting whether an active modal is visible on the page or not.
Syntax:
<div class="ui active modal"></div>
Example: The below example illustrates the Semantic-UI Modal Active State.
HTML
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link href=
rel="stylesheet" />
</script>
<script src=
</script>
<style>
.icon {
margin: 16px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong> Semantic-UI Modal Active State </strong>
</center>
<div class="ui segment">
<div class="ui active modal"></div>
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<button class="ui button green" onclick="openModal()">
Open Modal
</button>
<div class="ui modal">
<div class="header">
Welcome to GeeksforGeeks
</div>
<div class="content">
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Machine Learning</li>
</ul>
<br />
</div>
<div class="actions">
<div class="ui red cancel button">
<i class="close icon"></i> Close
</div>
</div>
</div>
</div>
</div>
<script>
const openModal = () => {
$('.ui.modal').modal('show')
}
</script>
</body>
</html>
|
Output:
Reference link: https://semantic-ui.com/modules/modal.html#active