En este artículo, aprenderemos cómo eliminar un modal de Bootstrap que se ha insertado a través de jQuery.
Enfoque 1: Usar los métodos click() , append() y remove() en la biblioteca jQuery.
Hay dos botones definidos en el siguiente ejemplo, que tienen las clases insert-modal y remove-modal respectivamente. En el script jQuery, se declara una variable triggerModalBtn y se le asigna el valor de un marcado típico de un botón que abre el modal al hacer clic. Se declara otra variable modal y se le asigna el valor de un marcado típico de un modal Bootstrap que está vinculado al botón definido antes a través de su id ejemploModal (al atributo data-bs-toggle en el botón se le da el valor de la id del Bootstrap modal).
Adjuntamos un evento de clic al botón con la clase insert-modal usando el método click(). Al hacer clic, el botón que activa el modal junto con el modal Bootstrap se agrega al cuerpo del documento mediante el método append(). Dentro de este detector de eventos, adjuntamos otro detector de eventos de clic, pero esta vez al botón con la clase remove-modal. Al hacer clic en el botón eliminar modal, el botón que activa el modal junto con el modal Bootstrap se elimina mediante el método remove().
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<!-- jQuery CDN -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
p {
font-size: 25px;
font-weight: bold;
}
/*Styling the trigger modal button of the Bootstrap modal */
.trigger-modal-btn {
margin: 3rem auto 0 auto;
display: block;
}
/*Styling the close button of the Bootstrap modal */
.close {
border: none;
background: transparent;
font-size: 1.5rem;
}
.close:hover {
color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Remove Bootstrap modal that has been inserted via jQuery</p>
<button type="button"
class="btn btn-secondary insert-modal">
Click me to insert Bootstrap modal
</button>
<button type="button"
class="btn btn-secondary remove-modal">
Click me to remove Bootstrap modal
</button>
<script type="text/javascript">
var triggerModalBtn = `<button
type="button"
class="btn btn-primary trigger-modal-btn"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Launch Bootstrap modal
</button>`;
var modal = `<div
class="my-modal modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">GeeksforGeeks</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
GeeksforGeeks is a computer
science portal for geeks.
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button type="button"
class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>`;
$(".insert-modal").click(function () {
$("body").append(triggerModalBtn);
$("body").append(modal);
$(".remove-modal").click(function () {
$(".trigger-modal-btn").remove();
$(".my-modal").remove();
});
});
</script>
</body>
</html>
Producción:
Enfoque 2: Usar los métodos click() , append() , on() y remove() en la biblioteca jQuery. Este enfoque es bastante similar al enfoque anterior, pero en lugar de eliminar el modal Bootstrap adjuntando un detector de eventos de clic al botón modal de eliminación dentro del botón modal de inserción, simplemente delegamos el controlador de eventos de clic de modo que el documento siempre esté escuchando cualquier evento de clic que se origine en cualquier elemento con una clase de remove-modal . Esto se hace usando el método on() .
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<!-- jQuery CDN -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
p {
font-size: 25px;
font-weight: bold;
}
/* Styling the trigger modal
button of the Bootstrap modal */
.trigger-modal-btn {
margin: 3rem auto 0 auto;
display: block;
}
/* Styling the close button of the
Bootstrap modal */
.close {
border: none;
background: transparent;
font-size: 1.5rem;
}
.close:hover {
color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Remove Bootstrap modal that
has been inserted via jQuery</p>
<button type="button"
class="btn btn-secondary insert-modal">
Click me to insert Bootstrap modal
</button>
<button type="button"
class="btn btn-secondary remove-modal">
Click me to remove Bootstrap modal
</button>
<script type="text/javascript">
var triggerModalBtn = `<button
type="button"
class="btn btn-primary trigger-modal-btn"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Launch Bootstrap modal
</button>`;
var modal = `<div
class="my-modal modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">
GeeksforGeeks
</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
GeeksforGeeks is a computer
science portal for geeks.
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button type="button"
class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>`;
$(document).on("click", ".remove-modal", function () {
$(".trigger-modal-btn").remove();
$(".my-modal").remove();
});
$(".insert-modal").click(function () {
$("body").append(triggerModalBtn);
$("body").append(modal);
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA