Dado un documento HTML con un modal, la tarea es evitar que el elemento del cuerpo se desplace siempre que el modal esté en un estado abierto. Esta tarea se puede realizar fácilmente usando JavaScript.
Enfoque: una solución simple a este problema es establecer el valor de la propiedad » desbordamiento » del elemento del cuerpo en » oculto » cada vez que se abre el modal, lo que deshabilita el desplazamiento en el elemento seleccionado. Una vez que se cierra el modal, estableceríamos la propiedad » desbordamiento » del elemento del cuerpo en » automático » para que la funcionalidad de desplazamiento esté habilitada en el elemento del cuerpo. Para saber si el modal está abierto o no, verificaríamos si tiene la clase CSS » oculta » en su lista de clases usando el método classList.contains() de JavaScript. Este “ escondidoLa clase ” es responsable de abrir y cerrar (cambiar la propiedad de visualización) del modal al hacer clic en un botón. Consulte el ejemplo dado para una mejor comprensión.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
body {
padding: 5% 20%;
}
#container {
z-index: 1;
}
#btn {
border: none;
font-size: 24px;
padding: 12px 36px;
color: white;
background-color: green;
}
#modal {
height: 200px;
width: 400px;
padding: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
background-color: green;
color: white;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<!--Button to toggle modal-->
<button id="btn" onclick="showModal()">
Toggle modal
</button>
<!--Modal container-->
<div id="modal" class="hidden">
<div id="modal-body">
<h1>GeeksforGeeks</h1>
<h2>This is a modal</h2>
</div>
</div>
<!--Long text so that the body scrolls-->
<div id="container">
<h1>
Given a graph and a source vertex in
the graph, find shortest paths from
source to all vertices in the given
graph. Dijkstra’s algorithm is very
similar to Prim’s algorithm for minimum
spanning tree. Like Prim’s MST, we
generate a SPT (shortest path tree)
with given source as root.
We maintain two sets, one set contains
vertices included in shortest path tree,
other set includes vertices not yet
included in shortest path tree. At every
step of the algorithm, we find a vertex
which is in the other set (set of not yet
included) and has a minimum distance from
the source. Below are the detailed steps
used in Dijkstra’s algorithm to find the
shortest path from a single source vertex
to all other vertices in the given graph.
Algorithm Create a set sptSet (shortest
path tree set) that keeps track of vertices
included in shortest path tree, i.e., whose
minimum distance from source is calculated
and finalized. Initially, this set is empty.
Assign a distance value to all vertices in
the input graph. Initialize all distance
values as INFINITE.
Assign distance value as 0 for the source
vertex so that it is picked first. While
sptSet doesn’t include all vertices Pick a
vertex u which is not there in sptSet and
has minimum distance value. Include u to
sptSet. Update distance value of all adjacent
vertices of u. To update the distance values,
iterate through all adjacent vertices. For
every adjacent vertex v, if sum of distance
value of u (from source) and weight of edge
u-v, is less than the distance value of v,
then update the distance value of v.
Given a graph and a source vertex in the
graph, find shortest paths from source to
all vertices in the given graph. Dijkstra’s
algorithm is very similar to Prim’s
algorithm for minimum spanning tree.
Like Prim’s MST, we generate a SPT (shortest
path tree) with given source as root.
We maintain two sets, one set contains
vertices included in shortest path tree,
other set includes vertices not yet included
in shortest path tree.
At every step of the algorithm, we find a
vertex which is in the other set (set of not
yet included) and has a minimum distance
from the source.
Below are the detailed steps used in
Dijkstra’s algorithm to find the shortest
path from a single source vertex to all other
vertices in the given graph. Algorithm
Create a set sptSet (shortest path tree set)
that keeps track of vertices included in
shortest path tree, i.e., whose minimum
distance from source is calculated and
finalized. Initially, this set is empty. Assign
a distance value to all vertices in the input
graph. Initialize all distance values as INFINITE.
Assign distance value as 0 for the source
vertex so that it is picked first. While sptSet
doesn’t include all vertices Pick a vertex u
which is not there in sptSet and has minimum
distance value. Include u to sptSet.
Update distance value of all adjacent vertices
of u. To update the distance values, iterate
through all adjacent vertices. For every
adjacent vertex v, if sum of distance value
of u (from source) and weight of edge u-v,
is less than the distance value of v, then
update the distance value of v.
</h1>
</div>
<script>
// Select required elements from the DOM
const modal = document.querySelector("#modal");
const body = document.querySelector("body");
const showModal = function (e) {
modal.classList.toggle("hidden");
if (!modal.classList.contains("hidden")) {
// Disable scroll
body.style.overflow = "hidden";
} else {
// Enable scroll
body.style.overflow = "auto";
}
};
</script>
</body>
</html>
Producción:
