Modal กับเชื่อมโยงไปยังเดียวกันดัชนี

0

คำถาม

ฉันต้องสร้าง modal อยู่ซึ่งฉันมีไว้เป็น href เชื่อมโยงไปยังติดต่อส่วนใส่ไว้ในตอนจบที่เดียวกัน index.html.

ตอนที่ฉันคลิกที่ contact me ปุ่ม modal dissapears และฉันไม่ scrolled ลงไปที่ส่วนติดต่อ(ฉันคิดว่ามีบางอย่างขอ inbuild scrolldown หลังจากการปิด modal ซึ่งทำลายของตัวเอง href เชื่อมโยง).

ฉันพยายามการใช้จาวาสคริปต์วิธีการหลังจากการคลิกที่ปุ่มแต่มันก็เหมือนปัญหาเลยนะ เมื่อใช้ window.location.reload และจากนั้น scrollintoview ต้อง #kontakt หน้า reloads ดีๆแต่ scrollintoview ไม่เคยพาน

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

html hyperlink modal-dialog
2021-11-15 11:25:01
1

คำตอบที่ดีที่สุด

1

มันต้องมีส่วนเกี่ยวข้องกับที่ทางเหตุการณ์เป็นนักฟังที่ทำงาน;มันเพียงไฟไหม้ครั้งหนึ่งซึ่งเป็นการปิด modal.

สิ่งที่ฉันทำคือแค่พังโดยการเพิ่มผู้หมดเวลาดังนั้นการปิดของ modal และต้องการเลื่อนบรรทัดในมุมมองไม่ไล่ออกในเวลาเดียวกัน

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>

2021-11-15 12:10:57

มัน scrolls ลงดีๆแต่ความมืดพื้นหลังโดยไม่มีความสามารถคลิกที่ยังคงอยู่ก่อนแล้ว <div class="modal-backdrop show"></div> คลาสนี้คือที่เหลืออยู่ด้านบนของร่างกายและช่วงตึกองเนื้อหาได้ที่นี่
Simonsoft177

ฉันไม่สามารถสร้างปัญหาของคุณสามารถลองเพิ่มขึ้นที่หมดเวลาเพื่อ 1000ms แล้วลองใหม่อีกครั้ง
otejiri

ฉันคิดว่าหมดเวลานไม่ใช่ปัญหาของตั้งแต่งหน้าก็ไม่ใช่ reloaded. ประเด็นคือตอนที่ modal เปิดทั้งหมดของพื้นหลังของกลายเป็น unscrollable บดบังออกไป ตอนที่คุณปิด modal ความสามารถที่จะเลื่อนและก้าวต่อหน้าควรจะกลับมาและความมืดพื้นหลังของ dissapear. แต่มัน doesnt เกิดขึ้นเพียงความสามารถเลื่อนย้อนกลับมาแต่ความมืดพื้นหลังและ disability ให้คลิกที่ยังคงดูเหมือนเป็นอย่างนั้น
Simonsoft177

มันเป็นไปได้ที่จะเพิ่มไปจาวาสคริปต์แบบอักษรเพื่อทำการลบแบบเจาะจง div โดยที่ไม่รู้ว่ามันบัตรประชาชนของเขามั้ย? <div class="modal-backdrop show"></div> องนี้ได้อย่างไรกัน?
Simonsoft177

โอเคคุณสามารถลบแสดง"แสดง"จาก classlist
otejiri

ขอบคุณที่ทำงาน สิ่งสุดท้ายเป็นไงถ้าฉันมีหลาย modals? ฉันควรคัดลอกและวางใหม่ listeners หรือลงทุนทุกสิ่งทุกอย่างในหนึ่ง?
Simonsoft177

คุณสามารถสร้างนั้นตราบเท่าที่มันยังมีพลังต่างกันก็น่าจะเป็นบัตรประจำตั
otejiri

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่