Eu criei um modal em que eu coloquei um href
link para uma seção de contato colocado no final do mesmo index.html
.
Quando eu clico no contact me
botão modal desaparece e eu não sou rolada para baixo para a secção de contacto (eu acho que há algum tipo de inbuild scrolldown depois de fechar o modal que quebra o meu próprio link href).
Tentei usar o método javascript depois de clicar o botão, mas existem também aparecem problemas.
Quando utilizar window.location.reload
e, em seguida, scrollintoview
para #kontakt
página recarrega bem, mas a 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 classe é restantes na parte superior do corpo e blocos de conteúdo.