Vytvoril som modálne, v ktorom som sa umiestnili href
odkaz na kontakt časti umiestnené na konci rovnaké index.html
.
Keď som kliknite na contact me
tlačidlo modálne dissapears a nie som posunuli nadol sekcii kontakt (myslím, že tam je nejaký druh inbuild scrolldown po zatvorení modálne, ktoré prestávky vlastné href odkaz).
Snažil som sa pomocou javascript metóda po kliknutí na tlačidlo ale aj tam sa objavia problémy.
Pri používaní window.location.reload
a potom scrollintoview
na #kontakt
stránka znovu načíta pekne, ale scrollintoview
nikdy uskutočniť.
<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>
tejto triede zostáva na hornej časti tela a bloky obsahu.