모달에 대한 링크와 함께 동일 인덱스

Question 1

내가 만든 모달에있는 배치 href 에 대한 링크를 연락처 섹션의 끝에 위치하는 동 index.html.

면 contact me 버튼을 모달 사라진다고 내가 아래로 스크롤하려는 연락처 섹션(내가 생각하는 몇 가지 종류의 inbuild scrolldown 닫은 후에는 모달하는 내 자신의 href 링크).

나 javascript 를 사용하는 방법 버튼을 클릭하면 그러나 거기에도 나타나는 문제입니다. 사용하는 경우 window.location.reload 다음 scrollintoview 하기 #kontakt 페이지를 다시 로드 멋지 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>

Question 2

그것은 방법으로 할 수 이벤트 리스너의 작품에만 발생시킬 시간을 닫는 모달입니다.

무엇을 했는지만 해킹을 추가하여 시간 제한도록 폐쇄의 모달과 스크롤을 보이지 않는 불에서 동일한 시간

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

그것은 방법으로 할 수 이벤트 리스너의 작품에만 발생시킬 시간을 닫는 모달입니다.

무엇을 했는지만 해킹을 추가하여 시간 제한도록 폐쇄의 모달과 스크롤을 보이지 않는 불에서 동일한 시간

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>

스크롤 다운 잘 하지만 어두운 배경이 없이는 기능을 클릭 여전히 존재합니다. <div class="modal-backdrop show"></div> 이 클래스에 남아있는 상단의 체 및 블록 내용입니다.
나는 복제 할 수 없습 문제,수 증가하려고 시간 제한하 1000ms 고 다시 시도하십시오
내가 생각하는 시간 제한되지 않는 문제 때문에 페이지를 다시 로드되지 않습니다. 요점은 그 때 모달은 모두 열의 배경이 되 unscrollable 고 어두워진다. 닫을 때 모달하는 기능 스크롤과 이 페이지에서 다시해야한다고 어두운 배경을 사라. 그러나 그것은 일어날 유일한 능력 스크롤 다시 온다 하지만 어두운 배경과 장애를 클릭 여전히 나타납니다.
그것은 추가 가능한 자바 스크립트를 특정 삭제 div 몰 id? <div class="modal-backdrop show"></div> 정확한 수 있습니다.
좋아요를 제거할 수 있습니다"표시"에서 classlist
당신을 감사하는 작동합니다. 마지막 것은,는 방법에 대해 있는 경우 여러 조동? 해야 난 그냥 복사 및 붙여 새로운 청취자 또는 넣어에서 모든 것을 하나?
을 복제할 수 있습니다 그 만큼 그들은 다른 Id

모달에 대한 링크와 함께 동일 인덱스

질문

최고의 응답

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리