बूटस्ट्रैप मॉडल

Question

के शीर्ष पर JQuery स्क्रॉल मैं वर्तमान में एक वेबसाइट पर लंबे कानूनी संदेश प्रदर्शित करने के लिए बूटस्ट्रैप मोडल प्लगइन का उपयोग कर रहा हूं, लेकिन समस्या यह है कि यदि आप दूसरे के बाद एक मोडल खोलते हैं, तो दूसरा दूसरा होगा पहले से ही जो भी स्थिति थी, उसे पहले से स्क्रॉल किया जा सकता है। तो मैं जेएस/JQuery के साथ शीर्ष पर एक div स्क्रॉल करने के लिए एक रास्ता तलाश रहा हूँ। इस कोड को मैं वर्तमान में उपयोग कर रहा हूँ है:

HTML:

<!--MODAL--> 
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
<h3 id="modalTitle"></h3> 
</div> 
<div id="modal-content" class="modal-body"> 
</div> 
<div class="modal-footer"> 
<button id="modalPrint" class="btn btn-info hidden-phone" onClick=''>Print</button> 
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
</div> 
</div> 

जावास्क्रिप्ट:

function openModal(heading, url) { 
    $.ajax({ 
    url: url, 
    cache: false 
    }).done(function(html) { 
    $("#modal-content").html(html); 
    $("#modalTitle").html(heading); 
    $('#modalPrint').attr('onClick', 'loadPrintDocument(printCookies, {attr : "href", url : '+ url +', showMessage: false, message: "Please wait while we create your document"})'); 
    $('#modal').modal('show'); 
    $("#modal-content").scrollTop(0); 
    }); 
} 

आप देख सकते हैं, मैं शीर्ष करने के लिए स्क्रॉल की कोशिश की है के बाद मॉडल किया गया है दिखाया गया है। कोई विचार?

Answer 1

ठीक है मैंने अपने प्रश्न का उत्तर दिया है। इस मुद्दे के साथ किसी और के लिए, बस इस समारोह को अपने जेएस में जोड़ें!

$('#modal').on('shown', function() { 
    $("#modal-content").scrollTop(0); 
}); 

मैं वहाँ के रूप में नहीं है इस सवाल छोड़ देंगे, एक समान (मैं मिल सकता है कि) और यह किसी की मदद कर सकते हैं

Answer 2

बूटस्ट्रैप 3 घटनाओं के साथ

अब बदल एक इस तरह प्राप्त किया जा सकता है (प्लस एक शीर्ष करने के लिए चिकनी एनीमेशन)

$('#modal').on('shown.bs.modal', function() { 
    $('#modal').animate({ scrollTop: 0 }, 'slow'); 
}); 

Answer 3

1. ऊपर स्क्रॉल बटन के एक वर्ग है: .page-स्क्रॉल

के एक वर्ग के साथ

1. मॉडल: .modal

2. स्क्रॉल मोडल के साथ ऐसा करने के लिए जे एस (जे एस हो सकता है सरलीकृत):

   $('body').on('click', '.page-scroll', function(event) { 
       var $anchor = $(this); 
       $('html, body, .modal').stop().animate({ 
        scrollTop: $($anchor.attr('href')).offset().top 
       }, 1500, 'easeInOutExpo'); 
       event.preventDefault(); 
   }); 
   

Answer 4

बूटस्ट्रैप में परिवर्तन जहां उपयोग करने की आवश्यकता थी: पर shown.bs.modal

कॉल एक समारोह है जब आप मोडल विंडो दिखाने (मैं इस विधि के लिए चुना)

<button onclick="showSMSSummary(); return false;" 
data-toggle="tooltip" title="Click To View Summary" 
class="btn btn-primary btn-sm">SMS Summary</button> 

function showSMSSummary() 
{ 
    $('#HelpScreenModalContent').modal('show');    
    $('#HelpScreenModal').animate({ scrollTop: 0 }, 'fast'); 
} 

Answer 5

ScrollTop bootbox modal on fadeIn जवाब है इस मुद्दे में।

बूटबॉक्स संवाद सेट अप करते समय अंत में .off("shown.bs.modal"); जोड़ें।

bootbox.dialog({ ... }).off("shown.bs.modal");

यह शीर्ष पर होना जब खुले संवाद स्क्रॉल करेगा।

Answer 6

बूटस्ट्रैप 4 (v4.0.0-alpha.6) पर मेरे लिए अच्छी तरह से काम करें:

$('#Modal').show().scrollTop(0); 

कृपया बूटस्ट्रैप-4.0.0 बीटा के रूप में ध्यान दें।1 और फ़ायरफ़ॉक्स 56.0.1 इस सही ढंग से काम करने के लिए प्रतीत नहीं होता है;

मैं IE11, एमएस एज और क्रोम की जाँच की और यह ठीक काम करता है।