Source

मोडल

बुटस्ट्र्यापको JavaScript मोडल प्लगइन प्रयोग गर्नुहोस् तपाईंको साइटमा लाइटबक्सहरू, प्रयोगकर्ता सूचनाहरू, वा पूर्ण रूपमा अनुकूलन सामग्रीको लागि संवादहरू थप्न।

यसले कसरी काम गर्छ

बुटस्ट्र्यापको मोडल कम्पोनेन्टको साथ सुरू गर्नु अघि, हाम्रो मेनु विकल्पहरू भर्खरै परिवर्तन भएकोले निम्न पढ्न निश्चित हुनुहोस्।

मोडलहरू HTML, CSS, र JavaScript सँग बनाइएका छन्। तिनीहरू कागजातमा अन्य सबै चीजहरूमा राखिएका छन् र <body>मोडल सामग्री स्क्रोलहरूबाट स्क्रोल हटाउनुहोस्।
मोडल "ब्याकड्रप" मा क्लिक गर्दा स्वतः मोडल बन्द हुनेछ।
बुटस्ट्र्यापले एक पटकमा एउटा मोडल सञ्झ्याललाई मात्र समर्थन गर्दछ। नेस्टेड मोडलहरू समर्थित छैनन् किनभने हामी तिनीहरूलाई कमजोर प्रयोगकर्ता अनुभवहरू हुन् भन्ने विश्वास गर्छौं।
मोडलहरू प्रयोग गर्दछ position: fixed, जुन कहिलेकाहीँ यसको रेन्डरिङको बारेमा अलि विशेष हुन सक्छ। सम्भव भएसम्म, अन्य तत्वहरूबाट सम्भावित हस्तक्षेपबाट बच्न आफ्नो मोडल HTML लाई शीर्ष-स्तरको स्थितिमा राख्नुहोस्। .modalअर्को निश्चित तत्व भित्र एक नेस्टिङ गर्दा तपाइँ सम्भावित समस्याहरूमा भाग्नुहुनेछ ।
एक पटक फेरि, कारणले गर्दा position: fixed, त्यहाँ मोबाइल उपकरणहरूमा मोडलहरू प्रयोग गर्ने केही चेतावनीहरू छन्। विवरणहरूको लागि हाम्रो ब्राउजर समर्थन कागजातहरू हेर्नुहोस्।
HTML5 ले यसको अर्थशास्त्रलाई कसरी परिभाषित गर्छ भन्ने कारणले गर्दा, HTML autofocusविशेषताले बुटस्ट्र्याप मोडलहरूमा कुनै प्रभाव पार्दैन। उही प्रभाव प्राप्त गर्न, केहि अनुकूलन JavaScript प्रयोग गर्नुहोस्:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

डेमो र उपयोग दिशानिर्देशहरू पढ्न जारी राख्नुहोस्।

उदाहरणहरू

तल एक स्थिर मोडल उदाहरण छ (अर्थ यसको positionर displayओभरराइड गरिएको छ)। मोडल हेडर, मोडल बडी (का लागि आवश्यक 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मोडललाई ठाडो रूपमा .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>

ग्रिड प्रयोग गर्दै

बुटस्ट्र्याप ग्रिड प्रणालीलाई मोडल .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 पछि प्रत्यक्ष डेमो छ। थप जानकारीको लागि, विवरणहरूको लागि मोडल घटना कागजातहरू पढ्नुहोस्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="...", मोडल शीर्षक, to, र आफैलाई सन्दर्भ गर्दै निश्चित .modalहुनुहोस् । थप रूपमा, तपाईंले आफ्नो मोडल संवादको विवरण दिन सक्नुहुन्छ ।role="document".modal-dialogaria-describedby.modal

YouTube भिडियोहरू इम्बेड गर्दै

मोडलहरूमा YouTube भिडियोहरू इम्बेड गर्नका लागि स्वतः प्लेब्याक र थप कुराहरू रोक्नको लागि बुटस्ट्र्यापमा नभएको अतिरिक्त जाभास्क्रिप्ट चाहिन्छ। थप जानकारीको लागि यो उपयोगी स्ट्याक ओभरफ्लो पोस्ट हेर्नुहोस् ।

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

मोडलहरूमा दुईवटा वैकल्पिक साइजहरू हुन्छन्, परिमार्जक वर्गहरू मार्फत उपलब्ध छन् .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>

प्रयोग

मोडल प्लगइनले डाटा विशेषताहरू वा JavaScript मार्फत मागमा तपाईंको लुकेको सामग्री टगल गर्दछ। यसले पूर्वनिर्धारित स्क्रोलिङ व्यवहारलाई ओभरराइड गर्न थप गर्दछ र मोडल बाहिर क्लिक गर्दा देखाइएका मोडलहरू खारेज गर्नको लागि क्लिक क्षेत्र प्रदान गर्न उत्पन्न .modal-openगर्दछ ।<body>.modal-backdrop

डाटा विशेषताहरू मार्फत

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

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

जाभास्क्रिप्ट मार्फत

myModalजाभास्क्रिप्टको एकल लाइनको साथ आईडीको साथ मोडल कल गर्नुहोस् :

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

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-backdrop=""।

नाम	टाइप गर्नुहोस्	पूर्वनिर्धारित	विवरण
पृष्ठभूमि	बुलियन वा स्ट्रिङ`'static'`	सत्य	मोडल ब्याकड्रप तत्व समावेश गर्दछ। वैकल्पिक रूपमा, `static`ब्याकड्रपको लागि निर्दिष्ट गर्नुहोस् जसले क्लिकमा मोडल बन्द गर्दैन।
किबोर्ड	बुलियन	सत्य	एस्केप कुञ्जी थिच्दा मोडल बन्द गर्छ
फोकस	बुलियन	सत्य	प्रारम्भ गर्दा मोडलमा फोकस राख्छ।
देखाउनु	बुलियन	सत्य	प्रारम्भ गर्दा मोडल देखाउँछ।

विधिहरू

एसिन्क्रोनस विधि र संक्रमण

सबै एपीआई विधिहरू एसिन्क्रोनस छन् र एक संक्रमण सुरु गर्नुहोस् । तिनीहरू संक्रमण सुरु हुने बित्तिकै तर यो समाप्त हुनु अघि कलरमा फर्कन्छन् । थप रूपमा, ट्रान्जिसनिङ कम्पोनेन्टमा विधि कललाई बेवास्ता गरिनेछ ।

थप जानकारीको लागि हाम्रो जाभास्क्रिप्ट कागजात हेर्नुहोस्।

`.modal(options)`

तपाईंको सामग्रीलाई मोडलको रूपमा सक्रिय गर्दछ। वैकल्पिक विकल्पहरू स्वीकार गर्दछ object।

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

`.modal('toggle')`

म्यानुअल रूपमा मोडल टगल गर्दछ। मोडल वास्तवमा देखाइयो वा लुकेको हुनु अघि कलरमा फर्कन्छ (जस्तै shown.bs.modalवा 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`घटनाको गुणको रूपमा उपलब्ध हुन्छ।
bs.modal लुकाउनुहोस्	यो घटना तुरुन्तै निकालिएको छ जब `hide`उदाहरण विधि कल गरिएको छ।
hidden.bs.modal	मोडल प्रयोगकर्ताबाट लुकाउन सकिएपछि यो घटना हटाइन्छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।

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