La interfaz de usuario semántica es un marco de interfaz de usuario de código abierto que se construye con el preprocesador CSS menos y jQuery . Viene con elementos y módulos prediseñados y funcionales que ayudan a crear grandes sitios web más rápido. También se puede usar con otros marcos CSS como Bootstrap.
Se utiliza un módulo emergente para mostrar información adicional al usuario. En este artículo, veremos la ventana emergente titulada type . El título de una ventana emergente se puede especificar utilizando el atributo de título de datos del módulo emergente.
Atributo de tipo con título emergente de interfaz de usuario semántica:
- data-title: este atributo puede especificar contenido emergente con un título.
Sintaxis:
<div class="ui ..."
data-title="..."
data-content="...">
...
</div>
Ejemplo 1: El siguiente ejemplo ilustra el uso del atributo de título de datos del módulo emergente para configurar el título de una ventana emergente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Popup Titled Type</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>
<style>
.ui.container {
text-align: center;
}
h3 {
margin-top: 0px;
}
.ui.button {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Semantic UI - Progress Titled Type</h3>
</div>
<div class="ui button"
data-title="GeeksforGeeks"
data-content=
"GeeksforGeeks is a computer science portal for geeks.
You can read article on various computer science subjects
like Data Structures, Algorithms, DBMS , etc.
You can also enroll in courses to get video
lectures on various subjects.">
Hover to see the popup with title.
</div>
</div>
<script>
$(".ui.button").popup();
</script>
</body>
</html>
Producción:
Tipo de ventana emergente de interfaz de usuario semántica con título
Ejemplo 2: El siguiente ejemplo muestra la ventana emergente de tipo titulado con diferentes variaciones de ancho.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Popup Titled Type</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>
<style>
.ui.container {
text-align: center;
}
h3 {
margin-top: 0px;
}
.ui.button {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>
Semantic UI Progress Titled Type with Width Variation
</h3>
</div>
<div class="ui grid">
<div class="sixteen wide column">
<div class="ui button"
data-title="GeeksforGeeks"
data-content=
"GeeksforGeeks is a computer science portal for geeks.
You can read article on various computer science subjects
like Data Structures, Algorithms, DBMS , etc.
You can also enroll in courses to get video
lectures on various subjects.">
Hover to see the popup with title.
</div>
</div>
<div class="sixteen wide column">
<div class="ui button"
data-title="GeeksforGeeks"
data-content=
"GeeksforGeeks is a computer science portal for geeks.
You can read article on various computer science subjects
like Data Structures, Algorithms, DBMS , etc.
You can also enroll in courses to get video lectures
on various subjects."
data-variation="wide">
Hover to see the wide popup with title.
</div>
</div>
<div class="sixteen wide column">
<div class="ui button"
data-title="GeeksforGeeks"
data-content=
"GeeksforGeeks is a computer science portal for geeks.
You can read article on various computer science subjects
like Data Structures, Algorithms, DBMS , etc.
You can also enroll in courses to get video lectures on
various subjects."
data-variation="very wide">
Hover to see the very wide popup with title.
</div>
</div>
</div>
</div>
<script>
$(".ui.button").popup();
</script>
</body>
</html>
Producción:
Tipo de ventana emergente de interfaz de usuario semántica con título
Enlace de referencia: https://semantic-ui.com/modules/popup.html#titled