Założyłem modalne, w którym zamieściłem href
link do sekcji "Kontakt", mieszczący się w końcu tego samego index.html
.
Kiedy wcisnę contact me
модальная przycisk znika i nie прокручиваюсь w dół do sekcji kontaktów (chyba, że jest jakaś wbudowana przewijanie po zamknięciu modalnej, która przerywa moją własną link href).
Próbowałem użyć metody javascript po naciśnięciu przycisku, ale również problemy.
Podczas korzystania z window.location.reload
i następnie scrollintoview
Dla #kontakt
strona załaduje dobrze, ale scrollintoview
nigdy się nie odbędzie.
<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>
klasa ta pozostaje na wierzchu ciała i blokuje zawartość.