बूटस्ट्रैप

Question

में मोडल बंद करने के बाद मैं मोडल ट्रिगर बटन को कैसे रोक सकता हूं, मैं मोडल बंद करने के बाद बटन को धुंधला नहीं कर सकता।

$('#exampleModal').on('hidden.bs.modal', function(e){ 
     $('button').blur(); 
    }); 

मैंने ऊपर की कोशिश की है और यह अभी भी इसे धुंधला नहीं लग रहा है। मैंने लगभग हर चीज की कोशिश की है। एकमात्र समाधान एक टाइमआउट सेट करना और मॉडल को छिपे हुए संक्रमण को खत्म करने के बाद धुंधला करना है। कोई बेहतर समाधान?

Answer 1

ट्रिगर तत्व पर वापस फ़ोकस .one() बाइंडिंग का उपयोग करके मोडल प्लगइन के भीतर सेट किया गया है, जो दुर्भाग्य से अनबाउंड नहीं हो सकता है। अच्छी खबर यह है कि हम यह कर सकते हैं है:

$('#myModal').on('shown.bs.modal', function(e){ 
    $('#myModaltrigger').one('focus', function(e){$(this).blur();}); 
}); 

कहाँ #myModaltrigger मोडल ट्रिगर बटन की आईडी है। .one() बाध्यकारी का उपयोग करने का कारण यह है कि धुंधला करने वाला फ़ंक्शन केवल मोडल दिखाए जाने के बाद ही बुलाया जाएगा। एक बार यह छिप जाता है, और फोकस/धुंध होता है, बटन को सामान्य रूप से ध्यान केंद्रित किया जा सकता है, जैसे इसे टैबबिंग करके, बिना स्वचालित रूप से धुंधला हो जाता है।

this working example

Answer 2

देखें दरअसल, @cvrebert यहीं है कि इस नकारात्मक रूप से प्रभावित पहुँच कर रही है।

धुंध() फोकस रीसेट करता है, इसलिए कीबोर्ड उपयोगकर्ता (दोनों दृश्यमान कीबोर्ड उपयोगकर्ता, और स्क्रीनreaders के अधिक समीक्षकों के उपयोगकर्ता) प्रभावी ढंग से पृष्ठ की शुरुआत में बाउंस होते हैं।

कीबोर्ड का उपयोग करके http://jsbin.com/sukevefepo/1/ को आजमाएं: बटन पर टैब करें, इसे ENTER/SPACE के साथ ट्रिगर करें, फिर बंद बटन को बंद करें, ENTER/SPACE। अब, मोडल बंद होने के बाद, टैब ... और आप देखते हैं कि आपका फोकस पहले लिंक पर वापस आ गया है। सबसे सरल पृष्ठों के अलावा कुछ भी के लिए, यह सबसे अच्छा परेशान है, और स्क्रीनreader उपयोगकर्ताओं के लिए नाटकीय रूप से विचलित हो सकता है)।

संक्षेप में: वर्तमान बूटस्ट्रैप व्यवहार सही है। एक बार मोडल बंद होने के बाद मैं मोडल ट्रिगर की केंद्रित उपस्थिति को नफरत करने की इच्छा को समझता हूं ... लेकिन ब्लर() का उपयोग करना उत्तर नहीं है (जब तक आप कुंजीपटल/एटी उपयोगकर्ताओं के बारे में बहुत कम ध्यान नहीं देते)।

एक और मजबूत दृष्टिकोण, कि मैं बूटस्ट्रैप के भविष्य के संस्करण की जांच करने की योजना बना रहा हूं, एक बार जब उपयोगकर्ता पहले टैब/SHIFT + TAB (कीबोर्ड उपयोगकर्ता को इंगित करता है) का उपयोग करके नेविगेट करता है, और गतिशील रूप से शरीर पर एक वर्ग सेट करना है, और दबाने के लिए: इन स्थितियों के लिए अन्यथा ध्यान केंद्रित शैलियों।

Answer 3

मेरे समाधान जो पृष्ठ पर एकाधिक क्रियार्थ द्योतक साथ काम करता है (Bootstrap modal examples के आधार पर):

$('.modal').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget); // Button that triggered the modal 
    button.one('focus', function (event) { 
     $(this).blur(); 
    }); 
});