Aynı dizine bağlantı içeren modal

Question 1

İçine yerleştirdiğim bir modal oluşturdum. href aynı bölümün sonuna yerleştirilen bir kişi bölümüne bağlantı index.html.

Ben tıkladığımda contact me düğme kalıcı kayboluyor ve iletişim bölümüne kaydırılmadım (kendi href bağlantımı kıran kalıcı kapattıktan sonra bir tür yerleşik kaydırma olduğunu düşünüyorum).

Düğmeye tıkladıktan sonra javascript yöntemini kullanmayı denedim, ancak sorunlar da ortaya çıkıyor. Kullanırken window.location.reload ve sonra scrollintoview -e doğru #kontakt sayfa güzel bir şekilde yeniden yüklenir, ancak scrollintoview asla olmayacak.

<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

Olay dinleyici işler ile bir ilgisi yoktur; tek kalıcı kapanış olan bir zaman tetikler.

Yaptığım şey sadece bir zaman aşımı ekleyerek kesmek, böylece modalın kapanması ve görüntülemek için kaydırılması aynı anda ateşlenmiyor

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

Olay dinleyici işler ile bir ilgisi yoktur; tek kalıcı kapanış olan bir zaman tetikler.

Yaptığım şey sadece bir zaman aşımı ekleyerek kesmek, böylece modalın kapanması ve görüntülemek için kaydırılması aynı anda ateşlenmiyor

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>

Güzel bir şekilde aşağı kaydırılır, ancak tıklatma yeteneği olmayan karanlık arka plan hala mevcuttur. <div class="modal-backdrop show"></div> bu sınıf gövdenin üstünde kalır ve içeriği engeller.
Sorunu çoğaltamıyorum, zaman aşımını 1000ms'ye yükseltmeyi deneyebilir ve tekrar deneyebilir misiniz
Sayfa yeniden yüklenmediğinden zaman aşımının sorun olmadığını düşünüyorum. Gerçek şu ki, modal açık olduğunda, tüm arka plan görünmez hale gelir ve kararır. Modal'ı kapattığınızda, sayfayı kaydırma ve taşıma yeteneği geri gelmeli ve karanlık arka plan kaybolmalıdır. Ancak bu gerçekleşmez, yalnızca kaydırma yeteneği geri gelir, ancak karanlık arka plan ve tıklatma engeli hala görünür.
Belirli bir silmek için javascript'e eklemek mümkün mü div kimliğini bilmeden mi ? <div class="modal-backdrop show"></div> tam olarak söylemek gerekirse.
Teşekkürler işe yarıyor. Son olarak, birden fazla modalım olsa nasıl olur? Sadece kopyalamak ve yeni dinleyiciler yapıştırın veya bir şeyi koymak gerekir?

Aynı dizine bağlantı içeren modal

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride