Semantic UI es un marco de código abierto que tiene algunas clases predefinidas para hacer que nuestro sitio web se vea hermoso y receptivo. Es similar a bootstrap ya que tiene clases predefinidas para su uso. Usó CSS y jQuery para construir la interfaz. Tiene algunos tipos diferentes de elementos que nos ayudan a crear un hermoso sitio web.
Semantic-UI Modal se usa para mostrar el contenido en la pantalla que puede bloquear temporalmente la interacción con el contenido principal. Podemos tener cualquier tipo de contenido dentro del modal. En este artículo, discutiremos Modal en Semantic-UI.
- Tipos modales de interfaz de usuario semántica : tenemos dos tipos de modales en Modal de interfaz de usuario semántica, uno en Modal y el otro en Modal básico.
- Contenido modal de interfaz de usuario semántica : hay cuatro tipos de contenido modal Encabezado, contenido de texto o puede decir contenido, contenido de imagen y contenido de acción.
- Variaciones modales de la interfaz de usuario semántica : la interfaz de usuario semántica modal nos ofrece tres variantes de modal de pantalla completa, modal de diferentes tamaños y modal de contenido de desplazamiento.
- Estados modales de interfaz de usuario semántica : solo hay un estado en odal que es un estado activo.
Sintaxis:
<div class="ui modal"> ... </div>
Ejemplo 1: el siguiente código muestra los tipos modales de interfaz de usuario semántica .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Modal</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h3>
Semantic UI Modal
</h3>
<div class="ui segment">
<button class="ui button primary"
onclick="modalType()">
Modal- Modal Type
</button>
<div class="ui modal" id="modalType">
<i class="close icon"></i>
<div class="header">
GeeksforGeeks
</div>
<h4>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles
</h4>
</div>
</div>
<div class="ui segment">
<button class="ui button green"
onclick="basicType()">
Modal- Basic Type
</button>
<div class="ui basic modal" id="basicType">
<div class="ui icon header">
<i class="web icon"></i>
GeeksforGeeks
</div>
<div class="content">
<p>
Welcome to GeeksforGeeks. This is Basic modal.
</p>
<br />
</div>
<div class="actions">
<div class="ui red basic cancel inverted button">
<i class="close icon"></i>
Close
</div>
</div>
</div>
</div>
</div>
<script>
const modalType = () => {
$('#modalType').modal('show');
}
const basicType = () => {
$('#basicType').modal('show');
}
</script>
</body>
</html>
Producción:
Tipos modales de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra el contenido modal de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Modal</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h3>
Semantic UI Modal
</h3>
<div class="ui segment">
<button class="ui button green"
onclick="headerContent()">
Modal- Header Content
</button>
<div class="ui modal" id="headerContent">
<div class="header">
This is Modal Header
</div>
</div>
</div>
<div class="ui segment">
<button class="ui button green"
onclick="contentContent()">
Modal- Content Content
</button>
<div class="ui modal" id="contentContent">
<div class="content">
<p> GeeksforGeeks Content 1</p>
<p> GeeksforGeeks Content 2 </p>
<p> GeeksforGeeks Content 3 </p>
</div>
</div>
</div>
<div class="ui segment">
<button class="ui button green"
onclick="imageContent()">
Modal- Image Content
</button>
<div class="ui modal" id="imageContent">
<div class="image content">
<img class="image"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<div class="description">
<p> GeeksforGeeks Image </p>
<p> GeeksforGeeks Image </p>
<p> GeeksforGeeks Image </p>
</div>
</div>
</div>
</div>
<div class="ui segment">
<button class="ui button green"
onclick="actionContent()">
Modal- Actions Content
</button>
<div class="ui modal" id="actionContent">
<div class="header">
GeeksforGeeks
</div>
<div class="actions">
<div class="ui green approve button">
<i class="close icon"></i>
Accepted
</div>
<div class="ui red cancel button">
<i class="close icon"></i>
Rejected
</div>
</div>
</div>
<div class="textt"> </div>
</div>
</div>
<script>
const headerContent = () => {
$('#headerContent').modal('show');
}
const contentContent = () => {
$('#contentContent').modal('show');
}
const imageContent = () => {
$('#imageContent').modal('show');
}
const actionContent = () => {
$('#actionContent').modal('show');
}
$('#actionContent').modal({
onApprove: function () {
$('.textt').text('Accepted')
},
onDeny: function () {
$('.textt').text('Rejected')
},
})
</script>
</body>
</html>
Producción:
Contenido modal de interfaz de usuario semántica.
Ejemplo 3: el siguiente código muestra las variaciones modales de la interfaz de usuario semántica .
HTML
<!DOCTYPE html>
<html>
<head>
<title> Semantic UI Modal </title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h3>
Semantic UI Modal
</h3>
<div class="ui segment">
<button class="ui button green"
onclick="fullVariation()">
Modal- Full Screen Variation
</button>
<div class="ui fullscreen modal" id="fullVariation">
<div class="header">
This is Full Screen Modal
</div>
<div class="content">
<p> GeeksforGeeks Content 1</p>
<p> GeeksforGeeks Content 2 </p>
<p> GeeksforGeeks Content 3 </p>
</div>
</div>
</div>
<div class="ui segment">
<div class="ui group">
<button class="ui button primary"
onclick="changeSize('mini')">
Mini
</button>
<button class="ui button primary"
onclick="changeSize('tiny')">
Tiny
</button>
<button class="ui button primary"
onclick="changeSize('small')">
Small
</button>
<button class="ui button primary"
onclick="changeSize('large')">
Large
</button>
</div> <br>
<button class="ui button green"
onclick="sizeVariation()">
Modal- Size Variation
</button>
<div class="ui modal" id="sizeVariation">
<div class="content">
<p> GeeksforGeeks 1</p>
<p> GeeksforGeeks 2 </p>
<p> GeeksforGeeks 3 </p>
</div>
</div>
</div>
<div class="ui segment">
<button class="ui button green"
onclick="scrollVariation()">
Modal- Scrolling Content Variation
</button>
<div class="ui longer modal" id="scrollVariation">
<div class="header">
Scrolling Content Variation
</div>
<div class="scrolling content">
<p> GFG 1 </p>
<p> GFG 2 </p>
<p> GFG 3 </p>
<p> GFG 4 </p>
<p> GFG 5 </p>
<p> GFG 6 </p>
<p> GFG 7 </p>
<p> GFG 8 </p>
<p> GFG 9 </p>
<p> GFG 10 </p>
<p> GFG 11 </p>
<p> GFG 12 </p>
<p> GFG 13 </p>
<p> GFG 14 </p>
<p> GFG 15 </p>
<p> GFG 16 </p>
<p> GFG 17 </p>
<p> GFG 18 </p>
<p> GFG 19 </p>
<p> GFG 20 </p>
</div>
</div>
</div>
</div>
<script>
const fullVariation = () => {
$('#fullVariation').modal('show');
}
const changeSize = (size) => {
$('#sizeVariation')
.removeClass('small')
.removeClass('mini')
.removeClass('tiny')
.removeClass('large')
$('#sizeVariation').addClass(size)
}
const sizeVariation = () => {
$('#sizeVariation').modal('show')
}
const scrollVariation = () => {
$('#scrollVariation').modal('show')
}
</script>
</body>
</html>
Producción:
Variaciones modales de la interfaz de usuario semántica
Ejemplo 4: el siguiente código demuestra los estados modales de interfaz de usuario semántica .
HTML
<!DOCTYPE html> <html> <head> <title> Semantic UI Modal </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 class="ui green header"> GeeksforGeeks </h2> <h3> Semantic UI Modal </h3> <div class="ui active modal"> <div class="header"> Modal- Active State </div> <h3 class="content"> <p> GeeksforGeeks </p> <p> A Computer Science portal for geeks. It contains well-written, well thought and well-explained computer science and programming articles. </p> </h3> </div> </div> </body> </html>
Producción:
Estados modales de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/modal.html
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA