Modální s odkazem na stejný index

Question 1

Vytvořil jsem modální, ve které jsem se umístil href odkaz na sekci kontakt umístěné na konci stejné index.html.

Když jsem klepněte na contact me tlačítko modální nezmizí a nebudu rolovat dolů na sekci kontakt (myslím, že tam je nějaký druh zabudovat tedy posunout dolů po zavření modálního který rozbije své vlastní href odkaz).

Snažil jsem se pomocí javascriptové metody po kliknutí na tlačítko, ale i tam se objevují problémy. Při použití window.location.reload a pak scrollintoview k #kontakt stránka načte dobře, ale scrollintoview nikdy konat.

<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>

Question 2

To má co do činění s tím, jak posluchače událostí, děl; to jen požáry, jeden čas, což je uzavření modální.

To, co jsem udělal, je jen hack tím, že přidá časový limit, takže uzavření modální a rolování pro zobrazení nebude vypálit ve stejné době

const myModal = document.getElementById('exampleModalToggle');

myModal.addEventListener('hidden.bs.modal', function (event) {
setTimeout(function(){ 
   el = document.querySelector("#kontakt")
   el.scrollIntoView({behavior: 'smooth'}); 
   }, 10);
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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>

otejiri · Answer 1 · 2021-11-15T12:10:57

To má co do činění s tím, jak posluchače událostí, děl; to jen požáry, jeden čas, což je uzavření modální.

To, co jsem udělal, je jen hack tím, že přidá časový limit, takže uzavření modální a rolování pro zobrazení nebude vypálit ve stejné době

const myModal = document.getElementById('exampleModalToggle');

myModal.addEventListener('hidden.bs.modal', function (event) {
setTimeout(function(){ 
   el = document.querySelector("#kontakt")
   el.scrollIntoView({behavior: 'smooth'}); 
   }, 10);
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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>

To posouvá dolů pěkně, ale na tmavém pozadí, bez schopnosti klepněte na tlačítko stále existuje. <div class="modal-backdrop show"></div> tato třída je zbývající na horní části těla a bloky obsahu.
Nemůžu replikovat problém, můžeš zkusit zvýšit timeout na 1000ms a zkuste to znovu
Myslím, že časový limit není problém, protože stránka není znovu načteny. Jde o to, že když modální je otevřít všechny pozadí se stává unscrollable a tmavé. Když zavřete modální schopnost procházejte a pohybujte se na stránce by se měl vrátit a tmavé pozadí zmizí. Nicméně to se nestane, pouze schopnost posouvat se vrací, ale tmavé pozadí a postižení klikněte ještě objeví.
Je možné přidat do javascriptu, aby odstranit konkrétní div aniž by věděl, jeho id ? <div class="modal-backdrop show"></div> abych byl přesný.
Děkuji vám, že funguje. Poslední věc, co když mám více modální slovesa? Měl bych jen zkopírovat a vložit nové posluchače nebo dát vše v jednom?

Modální s odkazem na stejný index

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii