in English

मोडल

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

यस पृष्ठमा

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

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

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

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

यस कम्पोनेन्टको एनिमेसन प्रभाव prefers-reduced-motionमिडिया क्वेरीमा निर्भर हुन्छ। हाम्रो पहुँच कागजातको घटाइएको गति खण्ड हेर्नुहोस् ।

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

उदाहरणहरू

तल एक स्थिर मोडल उदाहरण छ (अर्थ यसको positionर displayओभरराइड गरिएको छ)। मोडल हेडर, मोडल बडी (का लागि आवश्यक padding), र मोडल फुटर (वैकल्पिक) समावेश छन्। हामी तपाईंलाई सम्भव भएसम्म खारेज कार्यहरू सहित मोडल हेडरहरू समावेश गर्न वा अर्को स्पष्ट खारेज कार्य प्रदान गर्न अनुरोध गर्दछौं।

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

लामो सामग्री स्क्रोल गर्दै

जब मोडलहरू प्रयोगकर्ताको भ्यूपोर्ट वा उपकरणको लागि धेरै लामो हुन्छन्, तिनीहरू पृष्ठबाट स्वतन्त्र स्क्रोल हुन्छन्। हामीले के भन्न खोजेको हेर्न तलको डेमो प्रयास गर्नुहोस्।

तपाईले स्क्रोल गर्न मिल्ने मोडल पनि सिर्जना गर्न सक्नुहुन्छ जसले मोडल बडीमा थपेर स्क्रोल गर्न अनुमति .modal-dialog-scrollableदिन्छ .modal-dialog।

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

ठाडो केन्द्रित

.modal-dialog-centeredमोडललाई ठाडो रूपमा .modal-dialogकेन्द्रमा जोड्नुहोस् ।

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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-bs-*विशेषताहरू ।

तल उदाहरण HTML र JavaScript पछि प्रत्यक्ष डेमो छ। थप जानकारीको लागि, विवरणहरूको लागि मोडल घटना कागजातहरू पढ्नुहोस्relatedTarget ।

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

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

मोडलहरू बीच टगल गर्नुहोस्

धेरै मोडलहरू बीच टगल गर्नुहोस् data-bs-targetर data-bs-toggleविशेषताहरूको केही चलाख प्लेसमेन्टको साथ। उदाहरणका लागि, तपाईंले पहिले नै खुला साइन इन मोडल भित्रबाट पासवर्ड रिसेट मोडल टगल गर्न सक्नुहुन्छ। कृपया ध्यान दिनुहोस् कि धेरै मोडलहरू एकै समयमा खोल्न सकिँदैन — यो विधिले दुई अलग मोडलहरू बीच टगल गर्दछ।

पहिलो मोडल खोल्नुहोस्

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

एनिमेसन परिवर्तन गर्नुहोस्

चरले मोडल फेड-इन एनिमेसन अघिको $modal-fade-transformरूपान्तरण अवस्था निर्धारण गर्दछ , चरले मोडल फेड-इन एनिमेसनको अन्त्यमा रूपान्तरण निर्धारण गर्दछ ।.modal-dialog$modal-show-transform.modal-dialog

यदि तपाइँ उदाहरणको लागि जुम इन एनिमेसन चाहनुहुन्छ भने, तपाइँ सेट गर्न सक्नुहुन्छ $modal-fade-transform: scale(.8)।

एनिमेसन हटाउनुहोस्

हेर्नको लागि फेड इन हुनुको सट्टा मात्र देखिने मोडलहरूको लागि, .fadeतपाईंको मोडल मार्कअपबाट कक्षा हटाउनुहोस्।

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

गतिशील उचाइहरू

यदि मोडलको उचाइ यो खुला हुँदा परिवर्तन हुन्छ भने, तपाईंले myModal.handleUpdate()स्क्रोलबार देखा पर्दा मोडलको स्थिति पुन: समायोजन गर्न कल गर्नुपर्छ।

पहुँच

aria-labelledby="..."मोडल शीर्षकलाई सन्दर्भ गर्दै, थप्न निश्चित हुनुहोस् .modal। थप रूपमा, तपाईंले आफ्नो मोडल संवादको विवरण दिन aria-describedbyसक्नुहुन्छ .modal। role="dialog"हामीले पहिले नै JavaScript मार्फत थपेको हुनाले तपाईंले थप्न आवश्यक पर्दैन भनेर ध्यान दिनुहोस् ।

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

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

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

मोडलहरूसँग तीनवटा वैकल्पिक आकारहरू छन्, परिमार्जक वर्गहरू मार्फत उपलब्ध छन् .modal-dialog। साँघुरो भ्यूपोर्टहरूमा तेर्सो स्क्रोलबारहरूबाट बच्न यी आकारहरू निश्चित ब्रेकपोइन्टहरूमा किक हुन्छन्।

साइज	कक्षा	मोडल अधिकतम-चौडाइ
सानो	`.modal-sm`	`300px`
पूर्वनिर्धारित	कुनै पनि छैन	`500px`
ठूलो	`.modal-lg`	`800px`
धेरै ठूलाे	`.modal-xl`	`1140px`

परिमार्जक वर्ग बिना हाम्रो पूर्वनिर्धारित मोडल "मध्यम" आकार मोडल गठन गर्दछ।

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

अर्को ओभरराइड भनेको मोडल पप अप गर्ने विकल्प हो जसले प्रयोगकर्ता भ्युपोर्ट कभर गर्दछ, परिमार्जक वर्गहरू मार्फत उपलब्ध छ जुन a मा राखिएको छ .modal-dialog।

कक्षा	उपलब्धता
`.modal-fullscreen`	सधैं
`.modal-fullscreen-sm-down`	तल`576px`
`.modal-fullscreen-md-down`	तल`768px`
`.modal-fullscreen-lg-down`	तल`992px`
`.modal-fullscreen-xl-down`	तल`1200px`
`.modal-fullscreen-xxl-down`	तल`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

सास

चरहरू

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

लुप

उत्तरदायी फुलस्क्रिन मोडलहरू$breakpoints नक्सा र लूप मार्फत उत्पन्न हुन्छन् scss/_modal.scss।

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

प्रयोग

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

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

टगल गर्नुहोस्

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

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

खारेज गर्नुहोस्

तल देखाइएको मोडल भित्रdata बटनमा विशेषताको साथ खारेजी प्राप्त गर्न सकिन्छ :

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

वा मोडल बाहिरको बटनमा data-bs-targetतल देखाइएको रूपमा प्रयोग गरी :

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>

मोडल खारेज गर्ने दुबै तरिकाहरू समर्थित भए तापनि, ध्यान राख्नुहोस् कि मोडल बाहिरबाट खारेज गर्दा WAI-ARIA मोडल संवाद डिजाइन ढाँचासँग मेल खाँदैन । यो तपाईंको आफ्नै जोखिममा गर्नुहोस्।

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

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

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

विकल्पहरू

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

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

विधिहरू

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

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

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

पासिंग विकल्प

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

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

टगल गर्नुहोस्

म्यानुअल रूपमा मोडल टगल गर्दछ। मोडल वास्तवमा देखाइयो वा लुकेको हुनु अघि कलरमा फर्कन्छ (जस्तै shown.bs.modalवा hidden.bs.modalघटना हुनु अघि)।

myModal.toggle()

देखाउनु

म्यानुअल रूपमा मोडल खोल्छ। मोडल वास्तवमा देखाइनु अघि कलरमा फर्कन्छ (अर्थात shown.bs.modalघटना हुनु अघि)।

myModal.show()

साथै, तपाईले DOM तत्वलाई तर्कको रूपमा पास गर्न सक्नुहुन्छ जुन मोडल घटनाहरूमा प्राप्त गर्न सकिन्छ ( relatedTargetसम्पत्तिको रूपमा)।

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

लुकाउनुहोस्

म्यानुअल रूपमा मोडल लुकाउँछ। मोडल वास्तवमा लुकाउनु अघि कलरमा फर्कन्छ (अर्थात hidden.bs.modalघटना हुनु अघि)।

myModal.hide()

ह्यान्डल अपडेट

मोडलको स्थिति म्यानुअल रूपमा समायोजन गर्नुहोस् यदि मोडल खुला हुँदा यसको उचाइ परिवर्तन हुन्छ (अर्थात स्क्रोलबार देखा परेको अवस्थामा)।

myModal.handleUpdate()

डिस्पोज

तत्वको मोडललाई नष्ट गर्छ। (DOM तत्वमा भण्डारण गरिएको डाटा हटाउँछ)

myModal.dispose()

उदाहरण प्राप्त गर्नुहोस्

स्थिर विधि जसले तपाईंलाई DOM तत्वसँग सम्बन्धित मोडल उदाहरण प्राप्त गर्न अनुमति दिन्छ

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

स्थिर विधि जसले तपाइँलाई DOM तत्वसँग सम्बन्धित मोडल उदाहरण प्राप्त गर्न अनुमति दिन्छ, वा यो प्रारम्भ नगरिएको अवस्थामा नयाँ सिर्जना गर्न अनुमति दिन्छ।

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

घटनाहरू

बुटस्ट्र्यापको मोडल क्लासले मोडल प्रकार्यतामा हुक गर्नका लागि केही घटनाहरू उजागर गर्दछ। सबै मोडल घटनाहरू मोडलमा (जस्तै मा <div class="modal">) मा फायर गरिएका छन्।

घटना प्रकार	विवरण
`show.bs.modal`	`show`उदाहरण विधि बोलाउँदा यो घटना तुरुन्तै सक्रिय हुन्छ । यदि क्लिकको कारणले गर्दा, क्लिक गरिएको तत्व `relatedTarget`घटनाको गुणको रूपमा उपलब्ध हुन्छ।
`shown.bs.modal`	मोडल प्रयोगकर्ताको लागि दृश्यात्मक बनाइएपछि यो घटना निकालिन्छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)। यदि क्लिकको कारणले गर्दा, क्लिक गरिएको तत्व `relatedTarget`घटनाको गुणको रूपमा उपलब्ध हुन्छ।
`hide.bs.modal`	यो घटना तुरुन्तै निकालिएको छ जब `hide`उदाहरण विधि कल गरिएको छ।
`hidden.bs.modal`	मोडल प्रयोगकर्ताबाट लुकाउन सकिएपछि यो घटना हटाइन्छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।
`hidePrevented.bs.modal`	यो घटना तब निकालिन्छ जब मोडल देखाइन्छ, यसको ब्याकड्रप हुन्छ `static`र मोडल बाहिर एक क्लिक वा एस्केप कुञ्जी प्रेस किबोर्ड विकल्प वा मा `data-bs-keyboard`सेट गरिन्छ `false`।

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})

मोडल

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

उदाहरणहरू

मोडल अवयवहरू

मोडल शीर्षक

प्रत्यक्ष डेमो

स्थिर पृष्ठभूमि

लामो सामग्री स्क्रोल गर्दै

ठाडो केन्द्रित

टूलटिप्स र पपओभरहरू

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

फरक मोडल सामग्री

मोडलहरू बीच टगल गर्नुहोस्

एनिमेसन परिवर्तन गर्नुहोस्

एनिमेसन हटाउनुहोस्

गतिशील उचाइहरू

पहुँच

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

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

पूर्ण स्क्रिन मोडल

सास

चरहरू

लुप

प्रयोग

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

टगल गर्नुहोस्

खारेज गर्नुहोस्

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

विकल्पहरू

विधिहरू

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

पासिंग विकल्प

टगल गर्नुहोस्

देखाउनु

लुकाउनुहोस्

ह्यान्डल अपडेट

डिस्पोज

उदाहरण प्राप्त गर्नुहोस्

getOrCreateInstance

घटनाहरू