ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
in English

මාදිලිය

ආලෝක පෙට්ටි, පරිශීලක දැනුම්දීම්, හෝ සම්පූර්ණයෙන්ම අභිරුචි අන්තර්ගතයන් සඳහා ඔබේ වෙබ් අඩවියට සංවාද එක් කිරීමට Bootstrap හි JavaScript මාදිලි ප්ලගිනය භාවිතා කරන්න.

එය ක්රියා කරන ආකාරය

Bootstrap හි මොඩල් සංරචකය සමඟ ආරම්භ කිරීමට පෙර, අපගේ මෙනු විකල්ප මෑතකදී වෙනස් වී ඇති බැවින් පහත සඳහන් දෑ කියවීමට වග බලා ගන්න.

  • මාදිලි HTML, CSS සහ JavaScript සමඟ ගොඩනගා ඇත. <body>ඒවා ලේඛනයේ ඇති අනෙක් සියල්ල මත ස්ථානගත කර ඇති අතර ඒ වෙනුවට මොඩල් අන්තර්ගතය අනුචලනය වන පරිදි අනුචලනය ඉවත් කරන්න .
  • මාදිලියේ "පසුබිම" මත ක්ලික් කිරීමෙන් මාදිලිය ස්වයංක්රීයව වසා දමයි.
  • බූට්ස්ට්‍රැප් එක වරකට සහය දක්වන්නේ එක් මාදිලි කවුළුවකට පමණි. Nested modals දුර්වල පරිශීලක අත්දැකීම් ලෙස අප විශ්වාස කරන බැවින් ඒවාට සහය නොදක්වයි.
  • Modals භාවිතා කරයි position: fixed, සමහර විට එහි විදැහුම්කරණය ගැන ටිකක් විශේෂිත විය හැක. හැකි සෑම විටම, වෙනත් මූලද්‍රව්‍යවලින් විය හැකි මැදිහත්වීම් වළක්වා ගැනීම සඳහා ඔබේ මාදිලියේ HTML ඉහළ මට්ටමේ ස්ථානයක තබන්න. .modalවෙනත් ස්ථාවර මූලද්‍රව්‍යයක් තුළ කැදලි තැබීමේදී ඔබට ගැටලුවලට මුහුණ දීමට සිදුවනු ඇත .
  • නැවත වරක්, නිසා position: fixed, ජංගම උපාංගවල මාදිලි භාවිතා කිරීමේදී යම් යම් අනතුරු ඇඟවීම් තිබේ. විස්තර සඳහා අපගේ බ්‍රවුසර ආධාරක ලේඛනය බලන්න.
  • HTML5 එහි අර්ථ ශාස්ත්‍රය නිර්වචනය කරන ආකාරය හේතුවෙන්, HTML autofocusගුණාංගය Bootstrap modals වල බලපෑමක් නැත. එකම බලපෑම ලබා ගැනීම සඳහා, සමහර අභිරුචි 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>

මෙවලම් ඉඟි සහ popovers

මෙවලම් ඉඟි සහ පොපෝවර් අවශ්‍ය පරිදි ආකෘති තුළ තැබිය හැකිය. මාදිලි වසා ඇති විට, ඇතුළත ඇති ඕනෑම මෙවලම් ඉඟි සහ popovers ද ස්වයංක්‍රීයව ඉවත දමනු ලැබේ.

<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 වීඩියෝ කාවැද්දීම

යූ ටියුබ් වීඩියෝ මාදිලිවල කාවැද්දීමට ස්වයංක්‍රීයව නැවත ධාවනය සහ තවත් දේ නැවැත්වීමට අමතර ජාවාස්ක්‍රිප්ට් බූට්ස්ට්‍රැප් තුළ අවශ්‍ය වේ. වැඩි විස්තර සඳහා මෙම ප්‍රයෝජනවත් Stack Overflow පෝස්ට් බලන්න .

විකල්ප ප්රමාණ

මාදිලිවලට විකල්ප ප්‍රමාණ තුනක් ඇත, ඒවා මත තැබීමට විකරණකාරක පන්ති හරහා ලබා ගත හැකිය .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>

සම්පූර්ණ තිර මාදිලිය

තවත් ප්‍රතික්‍ෂේප කිරීමක් නම්, පරිශීලක නැරඹුම් තොට ආවරණය කරන මාදිලියක් උත්පතන කිරීමේ විකල්පයයි, එය මත තබා ඇති විකරණකාරක පන්ති හරහා ලබා ගත හැකිය .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);
      }
    }
  }
}

භාවිතය

මොඩල් ප්ලගිනය දත්ත ගුණාංග හෝ ජාවාස්ක්‍රිප්ට් හරහා ඔබගේ සැඟවුණු අන්තර්ගතය ඉල්ලුම මත ටොගල් කරයි. එය පෙරනිමි අනුචලන හැසිරීම අභිබවා යන අතර .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>

JavaScript හරහා

ජාවාස්ක්‍රිප්ට් තනි පේළියක් සමඟ මාදිලියක් සාදන්න:

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

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-bs-, ලෙසට එකතු කරන්න data-bs-backdrop="".

නම ටයිප් කරන්න පෙරනිමිය විස්තර
backdrop boolean හෝ string'static' true මාදිලි පසුබිම් මූලද්‍රව්‍යයක් ඇතුළත් වේ. විකල්පයක් ලෙස, staticක්ලික් කිරීමේදී මාදිලිය වසා නොයන පසුබිමක් සඳහා සඳහන් කරන්න.
keyboard බූලියන් true ගැලවීමේ යතුර එබූ විට මාදිලිය වසා දමයි
focus බූලියන් true ආරම්භ කරන විට මාදිලිය වෙත අවධානය යොමු කරයි.

ක්රම

අසමමුහුර්ත ක්රම සහ සංක්රාන්ති

සියලුම API ක්‍රම අසමමුහුර්ත වන අතර සංක්‍රාන්තියක් ආරම්භ කරන්න . සංක්‍රාන්තිය ආරම්භ වූ වහාම නමුත් එය අවසන් වීමට පෙර ඔවුන් නැවත අමතන්නා වෙත පැමිණේ . ඊට අමතරව, සංක්‍රාන්ති සංරචකයක ක්‍රම ඇමතුමක් නොසලකා හරිනු ඇත .

වැඩි විස්තර සඳහා අපගේ JavaScript ලේඛන බලන්න .

සමත් විකල්ප

ඔබේ අන්තර්ගතය මාදිලියක් ලෙස සක්‍රිය කරයි. විකල්ප විකල්ප පිළිගනී object.

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

ටොගල් කරන්න

මාදිලියක් අතින් ටොගල් කරයි. මාදිලිය ඇත්ත වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීම හෝ සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.modalhidden.bs.modal

myModal.toggle()

පෙන්වන්න

මාදිලියක් අතින් විවෘත කරයි. මාදිලිය ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.modal

myModal.show()

relatedTargetඑසේම, ඔබට DOM මූලද්‍රව්‍යයක් මාදිලියේ සිදුවීම් ( දේපල ලෙස) තුළ ලැබිය හැකි තර්කයක් ලෙස සම්මත කළ හැක .

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

සඟවන්න

මාදිලියක් අතින් සඟවයි. මාදිලිය සැගවීමට පෙර (එනම් hidden.bs.modalසිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.

myModal.hide()

හසුරුව යාවත්කාලීන කිරීම

මාදිලියක් විවෘතව තිබියදී එහි උස වෙනස් වුවහොත් (එනම් අනුචලන තීරුවක් දිස්වන්නේ නම්) මාදිලියේ පිහිටීම අතින් නැවත සකස් කරන්න.

myModal.handleUpdate()

බැහැර කරන්න

මූලද්රව්යයක මාදිලිය විනාශ කරයි. (DOM මූලද්‍රව්‍යයේ ගබඩා කර ඇති දත්ත ඉවත් කරයි)

myModal.dispose()

getInstance

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

සිදුවීම්

Bootstrap's modal class මගින් මාදිලියේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි. සියලුම මාදිලියේ සිදුවීම් මාදිලියේම (එනම් හිදී <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...
})