मोडल के साथ लिंक करने के लिए एक ही सूचकांक

0

सवाल

मैं बनाया है एक मॉडल है, जो में मैं रखा है एक href लिंक करने के लिए एक संपर्क अनुभाग के अंत में रखा एक ही index.html.

जब मैं क्लिक करें contact me बटन मोडल गायब हो जाता है और मैं नहीं कर रहा हूँ नीचे स्क्रॉल करने के लिए संपर्क अनुभाग (मुझे लगता है कि वहाँ के कुछ प्रकार है inbuild scrolldown समापन के बाद मोडल को तोड़ता है, जो अपने खुद href लिंक).

मैं करने की कोशिश की जावास्क्रिप्ट का उपयोग कर विधि बटन क्लिक करने के बाद, लेकिन वहाँ भी दिखाई देते हैं समस्याओं. का उपयोग करते समय 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>

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

सबसे अच्छा जवाब

1

यह करने के लिए जिस तरह से साथ घटना श्रोता काम करता है; यह केवल एक आग है, जो समय को बंद करने मोडल.

मैं क्या किया है सिर्फ एक हैक जोड़ने के द्वारा एक मध्यांतर तो समापन के मोडल और स्क्रॉल देखने के लिए नहीं बंद आग में एक ही समय में

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

यह नीचे स्क्रॉल अच्छी तरह से, लेकिन अंधेरे पृष्ठभूमि के बिना क्लिक करने के लिए क्षमता अभी भी मौजूद है । <div class="modal-backdrop show"></div> इस वर्ग के शेष है, शरीर के शीर्ष पर और ब्लॉक सामग्री.
Simonsoft177

मैं नकल नहीं कर सकते इस मुद्दे को, आप कर सकते हैं बढ़ाने का प्रयास करें करने के लिए मध्यांतर 1000ms और फिर कोशिश करें
otejiri

मुझे लगता है कि मध्यांतर मुद्दा नहीं है के बाद से पृष्ठ पुनः लोड नहीं. मुद्दा यह है कि जब मोडल खुला है सभी की पृष्ठभूमि बन जाता है unscrollable और अन्धेरा । जब आप मोडल स्क्रॉल करने की क्षमता और ले जाने पृष्ठ पर वापस आ जाना चाहिए और अंधेरे पृष्ठभूमि गायब है. हालांकि यह नहीं होता है, केवल क्षमता स्क्रॉल करने के लिए वापस आता है, लेकिन अंधेरे पृष्ठभूमि और विकलांगता क्लिक करने के लिए अभी भी प्रकट होता है ।
Simonsoft177

यह संभव है करने के लिए जोड़ें करने के लिए जावास्क्रिप्ट को नष्ट करने के लिए एक विशिष्ट div जानने के बिना अपने आईडी ? <div class="modal-backdrop show"></div> सटीक होना करने के लिए.
Simonsoft177

ठीक है आप को दूर कर सकते हैं "शो" से classlist
otejiri

धन्यवाद है कि काम करता है. आखिरी बात, कैसे के बारे में अगर मैं कई modals? चाहिए मैं बस कॉपी और पेस्ट नए श्रोताओं या में सब कुछ डाल दिया है?
Simonsoft177

आप की नकल कर सकते हैं कि के रूप में लंबे समय के रूप में वे अलग अलग आईडी
otejiri

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में