Cómo abrir una ventana modal de bootstrap usando jQuery?

Los modales de Bootstrap proporcionan una ventana emergente de JavaScript flexible y receptiva que se utiliza para mostrar imágenes, videos y alertas en un sitio web. Se encuentran sobre el contenido del documento. Sin embargo, Bootstrap admite solo un solo modal a la vez. Podemos utilizar jQuery de varias maneras con Bootstrap para complementos de JavaScript como información sobre herramientas, modales y más.

Este artículo ilustrará cómo lanzar un modal de bootstrap usando jQuery.

Cómo abrir una ventana modal de bootstrap usando jQuery?

JQuery es una biblioteca JavaScript simple y liviana utilizada para varios fines junto con las páginas web de JavaScript. Para abrir un modal de arranque con jQuery, revise los pasos enumerados:

• Paso 1: Crear ventana modal de arranque en el archivo HTML
• Paso 2: Abra la ventana modal de bootstrap usando jQuery

Paso 1: Crear ventana modal de arranque en el archivo HTML

Implemente el siguiente fragmento de código en el archivo HTML para crear un cuadro de diálogo modal:

• Primero, cree un botón que ayude a activar la ventana modal para este propósito, utilice el "" etiqueta.
• Entonces, agregue un ""Elemento con el"modal" y "desteñir"Clases para crear una ventana modal.
• Ajuste la ventana de diálogo utilizando el "dialog modal"Clase de bootstrap. Después de eso, diríjase para asignar el contenido especificando la clase de "contenido modal" en un contenedor "div" separado.
• Dentro de "encabezador modal", Defina el título y un botón de cierre en la esquina derecha. Cuando se hace clic, la ventana modal está cerrada. Esta función tiene lugar utilizando el atributo "de datos de datos". Luego se realiza el icono de cierre usando el "×".
• A continuación, utilice la clase de "cuerpo modal" en otro "div" utilizado para especificar el contenido modal.
• Al final de la sección del cuerpo, cree dos botones en la parte del pie de página para agregar "Cancelar" y "ahorrarOpciones:

Lanzar modal

Título

×

Bienvenido a Linuxhint!

Cancelar
Ahorrar

Se puede observar que no aparece ningún modal:

Paso 2: Abra la ventana modal de bootstrap usando jQuery

Dentro de ""Etiquetas, especifique el código jQuery como se implementa a continuación:

La siguiente es la descripción del código jQuery calificado anteriormente:

• El "ps"Es el atajo del método getElementById () y devuelve la ID del elemento específico.
• ".al hacer clic')"Es una función que genera un evento de tiempo de ejecución al hacer clic. Por ejemplo, lo hemos descrito cuando el botón con la identificación "lanzar modal"Se hace clic, se invocará la función especificada.
• La "función ()" se utiliza para implementar funciones en JavaScript. La función especificada tomará la identificación "#welcomemodal"De la ventana modal y asociarla con la jQuery"modal ('show')" función
• El código indicado anteriormente significa que la función mostrará la ventana modal en el botón Haga clic:

Hemos compilado con éxito el código jQuery para abrir la ventana modal de bootstrap.

Conclusión

Para abrir una ventana modal de arranque usando jQuery, primero, escriba el código HTML para la ventana modal. Después de eso, implementa las funciones jQuery. La jQuery "modal ('show')","modal ('escondite')", y "modal ('alternar')Las funciones se utilizan para el cuadro de diálogo Bootstrap Modal Window. Este artículo ha ilustrado el procedimiento para lanzar una ventana modal de arranque con jQuery.