twitter-bootstrap
मोडल डायलॉग्स

टिप्पणियों

मूल HTML उपयोग

बूटस्ट्रैप मोडल डायलॉग एक बूटस्ट्रैप घटक है जो एक मोडल डायलॉग विंडो बनाता है जो पेज-लेवल कंटेंट पर तैरता है।

HTML में बूटस्ट्रैप मोडल संवाद के मूल उपयोग का एक उदाहरण है:

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

बुनियादी जावास्क्रिप्ट का उपयोग और आरंभीकरण

मॉडल संवाद घटकों समारोह के साथ jQuery के माध्यम से instantiated किया जा सकता है $('#myModal').modal(options) , जहां $('#myModal') विशिष्ट करने के लिए एक उच्च-स्तरीय संदर्भ मॉडल संवाद और है options एक जावास्क्रिप्ट वस्तु को निर्दिष्ट करना है मोडल संवाद की डिफ़ॉल्ट विशेषताएँ।

options ऑब्जेक्ट कई गुणों को परिभाषित करने की अनुमति देता है जो प्रभावित करेगा कि मोडल संवाद कैसे व्यवहार करता है। इन गुणों को इस प्रकार परिभाषित किया गया है:

• backdrop संपत्ति एक उपयोगकर्ता को परिभाषित करने की अनुमति देती है कि वे ग्रे पृष्ठभूमि ओवरले चाहते हैं या नहीं, जो कि संवाद के पीछे दिखाई दे। बूलियन मान और स्ट्रिंग "स्थिर" दोनों को मान्यता दी गई है। यदि "स्थिर" निर्दिष्ट है, तो उपयोगकर्ता द्वारा पृष्ठभूमि ओवरले पर क्लिक करने पर मोडल संवाद बंद नहीं होगा।
• keyboard गुण उपयोगकर्ता को यह परिभाषित करने की अनुमति देता है कि क्या वे चाहते हैं कि मोडल डायल को बंद किया जाए या नहीं, जब कीबोर्ड पर एस्केप कुंजी दबाया जाता है।
• show प्रॉपर्टी एक उपयोगकर्ता को यह परिभाषित करने की अनुमति देती है कि क्या वे चाहते हैं कि मोडल डायल शुरू होने पर वे मॉडल डायलॉग को प्रदर्शित करें या नहीं।

यहाँ मूल जावास्क्रिप्ट उपयोग का एक उदाहरण दिया गया है:

$('#carModal').modal({ backdrop: false, keyboard: true, show: false });

अन्य बूटस्ट्रैप घटकों के साथ, डेटा विशेषताओं के माध्यम से HTML में मोडल के विकल्प भी निर्दिष्ट किए जा सकते हैं।