He creado un modal en el que me han puesto un href
enlace a una sección de contacto se coloca al final de la misma index.html
.
Cuando hago clic en el contact me
botón modal desaparece y no soy desplaza hacia abajo a la sección de contacto (creo que hay algún tipo de inbuild scrolldown después de cerrar el modal que rompe mi propia href enlace).
He intentado usar el método de javascript después de hacer clic en el botón, pero también aparecen los problemas.
Cuando se utiliza window.location.reload
y, a continuación, scrollintoview
a #kontakt
la página se vuelve a cargar muy bien, pero el scrollintoview
nunca tome lugar.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalToggle">
Launch demo modal
</button>
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered" style="width:50%;margin:auto">
<div class="modal-content">
<div class="modal-body">
<img src="https://www.apacara.com/media/images/orange.jpg" class="d-block w-100" style="width:100%;border-radius:4px;margin:auto">
</div>
</div>
<div class="modal-footer" style="text-align: center;">
<button class="btn btn-primary" style="float:left" data-bs-target="#exampleModalToggle6" data- bs-toggle="modal" data-bs-dismiss="modal">Next</button>
<a class="btn-grad" href="#kontakt" style="cursor:pointer;font-weight:500!important" data-bs- toggle="modal" data-bs-dismiss="modal">Contact me</a>
<button class="btn btn-primary" style="float:right" data-bs-target="#exampleModalToggle2" data- bs-toggle="modal" data-bs-dismiss="modal">Previous</button>
</div>
</div>
</div>
<div id="kontakt" style="margin-top:500px">Helo helo helo helo</div>
<div class="modal-backdrop show"></div>
esta clase se quedan en la parte superior del cuerpo y los bloques de contenido.