ट्विटर बूटस्ट्रैप मॉडल के आवेदक तत्व को कैसे प्राप्त करें?

मैं लागू मॉडल के लिए एक a तत्व मिल गया है:ट्विटर बूटस्ट्रैप मॉडल के आवेदक तत्व को कैसे प्राप्त करें?

<a class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" >Launch Modal</a>

और, कहते हैं कि यह मेरा मोडल है:

$('#myModal').on('hidden', function() { 
    // do something… 
})

<div class="modal hide" id="myModal"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">×</button> 
    <h3>Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
    <a href="#" class="btn" data-dismiss="modal">Close</a> 
    <a href="#" class="btn btn-primary">Save changes</a> 
    </div> 
</div>

मैं मोडल से निकाल दिया घटनाओं के लिए काम करता है बाध्य कर सकते हैं

मेरा सवाल है: मैं a तत्व का उपयोग कैसे कर सकता हूं - जिसने मेरे ईवेंट ग्राहक फ़ंक्शन से मोडल को आमंत्रित किया?

स्रोत

2012-07-19 cnkt

'$ (" एक [href = '# myModal '] ")' उस 'टैग' का चयन करेगा। क्या आप यही खोज रहे हैं? – sachleen

नहीं, यह वास्तव में नहीं है। क्योंकि यह #mymodal के बजाय कुछ भी हो सकता है। जो मैं खोज रहा हूं वह इस तरह है: event.related लक्ष्य या घटना। मूलभूत लक्ष्य या ऐसा कुछ। – cnkt

क्या मोडल 'mymodal' लॉन्च करने के लिए इसे # mymodal' होना आवश्यक नहीं है? आप "mymodal" को उस वैरिएबल के साथ प्रतिस्थापित कर सकते हैं जिसमें तत्व की आईडी है जिसमें आप ईवेंट करते हैं। – sachleen

यह बूटस्ट्रैप 3.0.0 में हल किया गया था event.relatedTarget के लिए धन्यवाद।

$('#your-modal').on('show.bs.modal', function (e) { 
    var $invoker = $(e.relatedTarget); 
});

स्रोत

2014-01-23 10:04:35 lou

और क्या होगा यदि मैं उस तत्व को जानना चाहूंगा जिसने मोडल के छिपाने का आह्वान किया? – axel

अच्छा प्रश्न axel, वर्तमान में अभी तक इसके लिए कुछ भी नहीं लगता है। –

क्या बूटस्ट्रैप 2.3 में इसके लिए कोई काम है? – Ashimema

वर्तमान में यह बॉक्स के बाहर उपलब्ध नहीं है। यदि आप बूटस्ट्रैप-मोडल कोड को स्वयं संपादित करना चाहते हैं तो इसके लिए एक फीचर अनुरोध और एक कार्य-आसपास है।

देखें here

स्रोत

2012-07-31 23:53:26 SummerDew

एक [पुल अनुरोध] था (https://github.com/twitter/bootstrap/pull/6256) सबमिट किया गया था, लेकिन किसी कारण से अस्वीकार कर दिया गया था। यह एक ऐसी सुविधा है जिसे मैं देखना चाहता हूं। – Bojangles

मैं एक स्थिति थी, जहां मैं "invoker" से संबंधित कुछ डेटा बाध्य करने के लिए किया था, जैसा कि आप ने कहा।

invoker

<img id="element" src="fakepath/icon-add.png" title="add element" data-toggle="modal" data-target="#myModal" class="add">

जे एस invoker से संबंधित डेटा को पकड़ने के लिए: मैं इसे करने के लिए एक "क्लिक" घटना बंधन और इस तरह डेटा के साथ काम करके इसे हल करने प्रबंधित किया है (बस कुछ कोड उदाहरण)

$('#element').on('click', function() { // Had to use "on" because it was ajax generated content (just an example) 
    var self = $(this); 
});

इस तरह, आप अपनी invoker से संबंधित डेटा संभाल कर सकते हैं वैसे भी आप चाहते हैं।

$('[data-toggle="modal"]').on('click', function() { 
    $($(this).attr('href')).data('trigger', this); 
}); 
$('.modal').on('show.bs.modal', function() { 
    console.log('Modal is triggered by ' + $(this).data('trigger')); 
});

आप निश्चित रूप से जगह ले सकता है show.bs.modal साथ shown.bs.modal या किसी अन्य घटना वे आग:

स्रोत

2013-02-14 11:03:25 darksoulsong

आप को सुनने के लिए है। ध्यान दें कि यह बूटस्ट्रैप 3.0.0 के लिए है। यदि आप 2.3.2 का उपयोग कर रहे हैं तो आपको से छुटकारा पाना होगा .bs.modal (मुझे लगता है)।

क्या मैं इस समाधान के बारे में की तरह है: तुम कौन है इस, स्वयं, कि और अन्य प्रॉक्सी समाधान कॉल याद करने की जरूरत नहीं है।

बेशक, आपको यह जांचना होगा कि href विशेषता वास्तविक लिंक नहीं है (गतिशील मोडल लोडिंग विकल्प)।

स्रोत

2013-09-23 15:39:31 Alex

मेरे मामले में सबसे अच्छे विकल्प। और, हाँ, 2.3.2 में आपको .bs.modal को हटाने की आवश्यकता है। –

आश्चर्यजनक रूप से चालाक समाधान! काश मैं इस समाधान को कई बार बढ़ा सकता हूं। मेरी समस्या यह थी कि एक मॉडल को कई तत्वों से ट्रिगर किया गया था और मैं मोडल के भीतर एक बटन पर एक क्लिक पर ट्रिगर तत्व चाहता था। हालांकि, 'show.bs.modal' और' event.relatedTarget' का उपयोग करने का पारंपरिक मार्ग संभव है, मैं या तो अनावश्यक 'अनबिंद()' कॉल और/या प्रदर्शन के साथ समझौता कर दूंगा। चीयर्स फिर से! – Fr0zenFyr

मोडल तत्व modal नामक डेटा उद्देश्य यह है कि सभी विकल्प है कि पारित कर रहे हैं बचाता है। आप उस तत्व पर 'स्रोत' डेटा विशेषता सेट कर सकते हैं जो मोडल को ट्रिगर करता है, इसे स्रोत की आईडी पर सेट करता है, और उसके बाद इसे बाद में options चर से पुनर्प्राप्त करता है।

ट्रिगर होगा:

<a id="launch-modal-1" class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" data-source="#launch-modal-1">Launch Modal</a>

घटना कॉलबैक में, modal डेटा वस्तु मिलता है, और source विकल्प को देखो:

$('#myModal').on('hidden', function() { 
    var modal = $(this).data('modal'); 
    var $trigger = $(modal.options.source); 
    // $trigger is the #launch-modal-1 jQuery object 
});

स्रोत

2014-02-21 15:36:59 user2109658

यह शुरुआत में मेरे लिए काम करना प्रतीत होता था, लेकिन जैसे ही मेरे पास एक से अधिक स्रोत थे, यह काम करना बंद कर दिया। ऐसा लगता है कि मोडल पहली बार विकल्पों को लागू करता है, इसलिए जो भी एंकर आप पहले क्लिक करते हैं, वह सभी बाद के संचालन में डेटा स्रोत का उपयोग करेगा। – izak

ट्विटर बूटस्ट्रैप मॉडल के आवेदक तत्व को कैसे प्राप्त करें?

उत्तर

संबंधित मुद्दे