Source

मोडल

प्रकाशपेटिकाः, उपयोक्तृसूचनाः, अथवा पूर्णतया अनुकूलितसामग्रीणां कृते स्वसाइट् मध्ये संवादं योजयितुं Bootstrap इत्यस्य JavaScript मोडल् प्लगिन् उपयुज्यताम् ।

कथं कार्यं करोति

Bootstrap इत्यस्य modal घटकेन सह आरम्भात् पूर्वं निम्नलिखितम् अवश्यं पठन्तु यतः अस्माकं मेनू विकल्पाः अद्यतने परिवर्तिताः सन्ति ।

  • मोडल्स् HTML, CSS, JavaScript इत्यनेन सह निर्मिताः सन्ति । ते दस्तावेजे अन्यत् सर्वं उपरि स्थिताः सन्ति तथा च स्क्रॉलं निष्कासयन्ति <body>येन मोडल सामग्री तस्य स्थाने स्क्रॉलं करोति।
  • मोडल् “backdrop” इत्यत्र क्लिक् कृत्वा स्वयमेव मोडल् बन्दं भविष्यति ।
  • बूटस्ट्रैप् एकस्मिन् समये केवलं एकं मोडल् विण्डो समर्थयति । नेस्टेड् मोडाल्स् समर्थिताः न सन्ति यतः वयं तान् दुर्बलाः उपयोक्तृअनुभवाः इति मन्यामहे।
  • Modals use position: fixed, यत् कदाचित् तस्य प्रतिपादनस्य विषये किञ्चित् विशेषं भवितुम् अर्हति । यदा यदा सम्भवं भवति तदा अन्येभ्यः तत्त्वेभ्यः सम्भाव्यहस्तक्षेपं परिहरितुं स्वस्य मोडल HTML शीर्षस्तरीयस्थाने स्थापयन्तु । .modalअन्यस्य नियततत्त्वस्य अन्तः एकं नेस्ट् कृत्वा भवन्तः सम्भवतः समस्यासु धावन्ति ।
  • पुनः, कारणतः position: fixed, चलयन्त्रेषु मोडालस्य उपयोगेन सह केचन चेतावनीः सन्ति । विस्तरेण ज्ञातुं अस्माकं ब्राउज़र समर्थन डॉक्स पश्यन्तु।
  • HTML5 इत्यनेन स्वस्य शब्दार्थं कथं परिभाषयति इति कारणतः Bootstrap modals इत्यत्र autofocusHTML विशेषतायाः कोऽपि प्रभावः नास्ति । समानं प्रभावं प्राप्तुं, किञ्चित् कस्टम् जावास्क्रिप्ट् उपयुज्यताम् :
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

डेमो तथा उपयोग मार्गदर्शिकाओं के लिए पढ़ते रहें।

उदाहरणानि

अधः स्थिरं मोडल उदाहरणम् (अर्थात् its positionand displayhave been overridden) अस्ति । अत्र मोडल हेडर, मोडल बॉडी (required for padding), मोडल पादलेखः (वैकल्पिकः) च समाविष्टाः सन्ति । वयं याचयामः यत् भवान् यदा सम्भवं तदा निष्कासनक्रियाभिः सह मोडलशीर्षकाणि समाविष्टं करोतु, अथवा अन्यां स्पष्टनिवृत्तिक्रियाम् अयच्छतु ।

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

लाइव डेमो

अधोलिखितं बटनं नुत्वा कार्यरतं मोडल डेमो टॉगल कुर्वन्तु। पृष्ठस्य उपरितः अधः स्लाइड् कृत्वा क्षीणं भविष्यति ।

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

दीर्घ सामग्री स्क्रॉल करना

यदा मोडाल्स् उपयोक्तुः दृश्यपोर्ट् अथवा यन्त्रस्य कृते अतिदीर्घाः भवन्ति तदा ते पृष्ठात् एव स्वतन्त्रतया स्क्रॉल कुर्वन्ति । अस्माकं अभिप्रायः किम् इति द्रष्टुं अधोलिखितं डेमो प्रयतस्व।

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

ऊर्ध्वाधर केन्द्रित

मोडल को लम्बवत केन्द्रित करने के .modal-dialog-centeredलिए to जोड़ें ।.modal-dialog

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

टूलटिप्स एवं पोपोवर

आवश्यकतानुसारं टूलटिप्स, पोपोवर्स् च मोडल्स् इत्यस्य अन्तः स्थापयितुं शक्यन्ते । यदा मोडाल्स् बन्दाः भवन्ति तदा अन्तः यत्किमपि टूल्टिप्स्, पोपोवर्स् च स्वयमेव निष्कासिताः भवन्ति ।

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

जालस्य उपयोगेन

अन्तः नेस्टिंग् कृत्वा एकस्य मोडलस्य अन्तः Bootstrap जालप्रणाल्याः उपयोगं .container-fluidकुर्वन्तु .modal-body। ततः, सामान्यजालप्रणालीवर्गाणां उपयोगं यथा अन्यत्र करोषि ।

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

भिन्न-भिन्न मोडल सामग्री

बटनस्य एकः गुच्छः अस्ति यत् सर्वे किञ्चित् भिन्नसामग्रीभिः सह समानं मोडलं प्रेरयन्ति? उपयोगं event.relatedTargetतथा HTML data-*विशेषताः (संभवतः jQuery मार्गेण ) मोडलस्य सामग्रीं परिवर्तयितुं यत् बटनं क्लिक् कृतम् इति अवलम्ब्य ।

अधः लाइव डेमो अस्ति तदनन्तरं उदाहरणं HTML तथा JavaScript अस्ति। अधिकविवरणार्थं, विषये विवरणार्थं modal events docs पठन्तुrelatedTarget ।

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

एनिमेशन को हटा दें

दृश्यार्थं फीका भवितुं न अपितु केवलं दृश्यमानानां मोडालानां कृते, .fadeस्वस्य मोडल मार्कअपतः वर्गं निष्कासयन्तु ।

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

गतिशील ऊर्ध्वताः

यदि कस्यचित् मोडलस्य ऊर्ध्वता उद्घाटिते सति परिवर्तते तर्हि भवन्तः $('#myModal').modal('handleUpdate')स्क्रॉलबारः दृश्यते चेत् मोडलस्य स्थितिं पुनः समायोजयितुं आह्वानं कुर्वन्तु ।

सुलभता

role="dialog"तथा aria-labelledby="...", मोडल शीर्षक को संदर्भित करते हुए, को .modal, और स्वयं role="document"को अवश्य जोड़ें । तदतिरिक्तं, भवान् on .modal-dialogइत्यनेन सह स्वस्य मोडल संवादस्य वर्णनं दातुं शक्नोति ।aria-describedby.modal

यूट्यूब विडियो एम्बेड करना

यूट्यूब-वीडियो-इत्येतत् मोडल्-मध्ये एम्बेड्-करणार्थं स्वयमेव प्लेबैक्-स्थगितुं Bootstrap-मध्ये न अतिरिक्त-जावास्क्रिप्ट्-इत्यस्य आवश्यकता वर्तते । अधिकसूचनार्थं एतत् सहायकं Stack Overflow पोस्ट पश्यन्तु।

वैकल्पिक आकार

मोडल्स् द्वौ वैकल्पिकौ आकारौ स्तः, एकस्मिन् स्थापनार्थं परिवर्तकवर्गाणां माध्यमेन उपलभ्यन्ते .modal-dialog। एते आकाराः संकीर्णतरदृश्यपोर्टेषु क्षैतिजस्क्रॉलबारं परिहरितुं कतिपयेषु विच्छेदबिन्दुषु किक-इनं कुर्वन्ति ।

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

प्रयोगः

मोडल प्लगिन् भवतः गुप्तसामग्री आग्रहेण, आँकडा विशेषताभिः अथवा जावास्क्रिप्ट् मार्गेण टोग्ल् करोति । .modal-openइदं to <body>override default scrolling behavior इत्यत्र अपि योजयति तथा .modal-backdropच modal इत्यस्य बहिः क्लिक् करणसमये दर्शितानां मोडाल्स् इत्यस्य निराकरणार्थं क्लिक् क्षेत्रं प्रदातुं a जनयति ।

डेटा विशेषताओं के माध्यम से

जावास्क्रिप्ट् लिखित्वा विना एकं मोडल् सक्रियं कुर्वन्तु। data-toggle="modal"बटन इव नियन्त्रकतत्त्वे सेट् कुर्वन्तु, एकेन सह data-target="#foo"अथवा href="#foo"टोग्ल् कर्तुं विशिष्टं मोडल् लक्ष्यं कर्तुं ।

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

जावास्क्रिप्ट् मार्गेण

myModalजावास्क्रिप्ट् इत्यस्य एकपङ्क्तौ id इत्यनेन सह मोडल् आह्वयन्तु :

$('#myModal').modal(options)

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-backdrop=""।

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
पृष्ठभूमिः बूलेन वा तारः'static' सत्यम्‌ एकं मोडल-पृष्ठभूमितत्त्वं समावेशयति। वैकल्पिकरूपेण, staticएकस्य पृष्ठभूमिस्य कृते निर्दिशतु यत् क्लिक् इत्यत्र मोडल् न बन्दं करोति ।
कीबोर्ड बूलियन इति सत्यम्‌ escape कील दबाने पर मोडल बन्द करता है
केंद्रबिन्दुः बूलियन इति सत्यम्‌ आरम्भे मोडल इत्यत्र ध्यानं स्थापयति ।
दर्शयतु बूलियन इति सत्यम्‌ आरम्भे मोडल दर्शयति ।

विधियाँ

अतुल्यकालिक विधियाँ एवं संक्रमण

सर्वे एपिआइ विधिः अतुल्यकालिकः भवति तथा च संक्रमणं आरभते | ते संक्रमणस्य आरम्भमात्रेण परन्तु तस्य समाप्तेः पूर्वं आह्वानकर्तुः समीपं आगच्छन्ति | तदतिरिक्तं, संक्रमणघटकस्य उपरि एकः विधि-आह्वानः अवहेलितः भविष्यति .

अधिकविवरणार्थं अस्माकं जावास्क्रिप्ट् दस्तावेजं पश्यन्तु ।

.modal(options)

भवतः सामग्रीं मोडलरूपेण सक्रियं करोति। एकं वैकल्पिकं विकल्पं स्वीकुर्वति object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

एकं मोडलं मैन्युअल् रूपेण टॉगल करोति। मोडलस्य वास्तविकरूपेण दर्शितस्य वा गोपनीयस्य वा पूर्वं (अर्थात् shown.bs.modalor hidden.bs.modalघटनायाः भवितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।

$('#myModal').modal('toggle')

.modal('show')

मैन्युअल् रूपेण एकं मोडल् उद्घाटयति। मोडालस्य वास्तविकरूपेण दर्शितस्य पूर्वं (अर्थात् shown.bs.modalघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।

$('#myModal').modal('show')

.modal('hide')

एकं मोडलं मैन्युअल् रूपेण गोपयति। मोडालस्य वास्तविकरूपेण गोपनात् पूर्वं (अर्थात् hidden.bs.modalघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।

$('#myModal').modal('hide')

.modal('handleUpdate')

यदि मोडलस्य ऊर्ध्वता उद्घाटिते सति परिवर्तते (अर्थात् स्क्रॉलबारः दृश्यते चेत्) मोडलस्य स्थितिं मैन्युअल् रूपेण पुनः समायोजयन्तु ।

$('#myModal').modal('handleUpdate')

.modal('dispose')

एकस्य तत्त्वस्य मोडलं नष्टं करोति।

घटनाः

बूटस्ट्रैप् इत्यस्य मोडलवर्गः मोडलकार्यक्षमतायां हुक् करणाय कतिपयानि घटनानि उजागरयति । सर्वाणि मोडलघटनानि मोडलस्यैव उपरि (अर्थात् <div class="modal">) प्रज्वलितानि भवन्ति ।

घटना प्रकार वर्णनम्‌
show.bs.modal इति दर्शयतु एषा घटना तत्क्षणमेव प्रज्वलति यदा showदृष्टान्तविधिः आह्वयते । यदि क्लिक् कारणेन भवति तर्हि क्लिक् कृतं तत्त्वं relatedTargetघटनायाः गुणरूपेण उपलभ्यते ।
दर्शितम्.bs.modal इदं घटना तदा प्रज्वलितं भवति यदा मोडल् उपयोक्त्रे दृश्यमानं कृतम् अस्ति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) । यदि क्लिक् कारणेन भवति तर्हि क्लिक् कृतं तत्त्वं relatedTargetघटनायाः गुणरूपेण उपलभ्यते ।
hide.bs.modal इति इदं घटना तत्क्षणमेव प्रज्वलितं भवति यदा उदाहरणविधिः hideआहूता अस्ति ।
छिपे हुए.bs.modal इदं घटना तदा प्रज्वलितं भवति यदा मोडल् उपयोक्त्रेण गोपनीयं समाप्तं भवति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) । 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})