Este artículo aprende principalmente el cuadro JavaScript Plug-in-Pop-Up.
Caso
Agregue una pequeña superposición al contenido de la página, al igual que los efectos en el iPad, agregando información adicional a los elementos de la página.
Echemos un vistazo a algunas representaciones de casos estáticos simples
El efecto es relativamente simple, principalmente la pequeña forma que aparece estáticamente, dividida en el título y el contenido de formulario.
<Div> <Viv> <Viv> </div> <h3> Popover Top </h3> <div> <p> Sed Posuere ConsectETUR EST en Lobortis. Aenean UE Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis vestibulum. </p> </div> <div> <div> </div> <h3> Popover Right </h3> <div> <p> Sed Posuere Consectetur Est en Lobortis. Aenean UE Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis. </p> </div> <div> <div> </div> <h3> Popover Right </h3> <div> <p> SED POSUERE CONSECTETUR EST en Lobortis. Aenean UE Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis vestibulum. </p> </div> <div> <div> </div> <h3> Popover Bottom </h3> <div> <p> Sed Posuere ConsectetUr est en Lobortis. Aenean UE Leo Quam. Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> <div> <div> </div> <h3> Popover izquierdo </h3> <div> <p> sed posual consecttet est en Lobortis. Aenean UE Leo Quam. Pellentesque Ornare sem lacinia quam venenatis. </p> </div> <div> <div> </div> <h3> popover izquierda </h3> <div> <p> sed posuale consecttur est en lobortis. Aenean UE Leo Quam. PellenteSque Sem Lacinia Quam Venenatis vestibulum. </p> </div> </div> <div> </div>
Pero aún necesitamos establecer un diseño básico simple para los elementos
<style type = "text/css">. BS-EXample-POPOVER .POPOVER {posición: relativo; Pantalla: bloque; flotante: izquierda; Ancho: 240px; margen: 20px;} </style>Demostración dinámica
Echemos un vistazo a las representaciones primero
Aparecerá un botón cuando haga clic en el botón.
En realidad, es muy simple leer el código.
[Código] <a id = "a2" data-placation = "right" data-content = "es decir, expresar desprecio por varios comportamientos e ideas impactantes que tienen características de atributo como cortas, gordas, pobres, feas, feas, estúpidas y masturbaciones. Silk (o seda de la seda de la seda"). Las familias pobres, como los hogares rurales o muchos hogares urbanos de nivel inferior, sin más orígenes, muchas escuelas secundarias suspendidas, fueron a la ciudad a trabajar, o se convirtieron en camareros de restaurantes, o en los administradores de Internet de Internet, y obtuvieron una taza de sopa amarga en la riqueza de la ciudad de la ciudad. href = "#" data-original-title = "Silk original significado"> Haga clic para alternar Popover </a> [Código]
Es solo una etiqueta, pero ofrece la clase de estilo del botón y luego ofrece varios atributos, que se usan principalmente para mostrar el cuadro emergente:
El primero: Título de origen de datos-Título
El segundo: contenido de datos de datos
Tercero: Posición de colocación de datos (arriba, abajo, izquierda, derecha)
Pero ahora, si lo ejecuta, el botón lo tiene y el cuadro emergente cuando haga clic en el botón no aparecerá. Resultó ser muy simple, es decir, aún no lo hemos inicializado, al igual que la información sobre herramientas en la sección anterior.
Simplemente agregue el código JavaScript simple.
<script type = "text/javaScript"> $ ("#a1"). popover (); </script>Cuatro direcciones
<div style = "margin-left: 200px; margin-top: 100px; margin-bottom: 200px;"> <div> <button type = "button" data-Container = "Body" data-toggle = "Popover" data-placation = "izquierda" data-Content = "Vivamus sagittis lacus vel augue laeoret rutrum faucus faucus.". type = "Botton" Data-Container = "Body" Data-Toggle = "Popover" Data-placation = "Top" Data-Content = "Vivamus sagittis lacus Vel Augue Laoreet Rutrum faucibus."> El cuadro de ventana superior </botón> <botón tipo = "Button" Data-Container = "Body" Data-toggle = "Popover" sagittis lacus vel augue laoreet rutrum faucibus."> The lower pop-up box</button><button type="button" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> right side bullet box</button></div></div>
Luego usa JavaScript para activar
<script type = "text/javaScript"> $ ("#a1"). popover (); $ ("[data-toggle = popover]"). popover (); </script>Función de adición selectiva
Para las consideraciones de rendimiento, la API de atributos de datos de información sobre herramientas y componentes emergentes se agregan opcionalmente, lo que significa que debe inicializarlos usted mismo.
Se requieren configuraciones adicionales cuando se utilizan cuadros emergentes en grupos de botones y grupos de cuadros de entrada
Cuando el cuadro de inmediato se usa junto con el grupo .BTN o el grupo de entrada, debe especificar el contenedor: la opción 'Body' (consulte la documentación a continuación) para evitar los efectos secundarios no deseados (por ejemplo, cuando aparece el cuadro emergente, los elementos de página que cooperan con ella pueden volverse más ondulados o disminuidos).
Al usar cuadros emergentes en elementos de página prohibidos, debe agregar un elemento adicional para envolverlo
Para agregar un cuadro emergente a un elemento desactivado o. Disable, envuelva el elemento de página que debe agregarse al cuadro emergente en un <div>, y luego aplique un cuadro emergente a este elemento <Div>.
uso
Habilitar cajas emergentes a través de JavaScript:
$ ('#Ejemplo'). Popover (Opciones)
Opción
Las opciones se pueden pasar a través de propiedades de datos o JavaScript. Para el atributo de datos, debe poner el nombre de la opción después de datos, por ejemplo, datos-animation = "".
método
$ (). Popover (Opciones)
Inicializa el cuadro emergente para un conjunto de elementos.
$ ('#elemento'). Popover ('show')
Muestra el cuadro emergente.
$ ('#elemento'). Popover ('escondite')
Esconde el cuadro emergente.
$ ('#elemento'). Popover ('Toggle')
Mostrar u ocultar la caja emergente.
$ ('#elemento'). Popover ('destruir')
Esconder y destruir el cuadro emergente.
evento
$ ('[data-toggle = popover]'). on ('shows.bs.popover', function () {alerta (1);})Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.