ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
in English

ሞዳል

ለብርሃን ሳጥኖች፣ የተጠቃሚ ማሳወቂያዎች ወይም ሙሉ ለሙሉ ብጁ ይዘት ወደ ጣቢያዎ መገናኛዎችን ለመጨመር የ Bootstrap's JavaScript ሞዳል ተሰኪን ይጠቀሙ።

እንዴት እንደሚሰራ

በBootstrap ሞዳል አካል ከመጀመራችን በፊት፣የእኛ ምናሌ አማራጮች በቅርብ ጊዜ ስለተቀየሩ የሚከተለውን ማንበብዎን እርግጠኛ ይሁኑ።

  • ሞዳልሎች በኤችቲኤምኤል፣ ሲኤስኤስ እና ጃቫስክሪፕት የተገነቡ ናቸው። እነሱ በሰነዱ ው���ጥ ካሉት ሁሉም ነገሮች ላይ ተቀምጠዋል እና <body>በምትኩ የሞዳል ይዘት እንዲሸብልል ጥቅልሉን ያስወግዱት።
  • ሞዳል "backdrop" ላይ ጠቅ ማድረግ ሞዳልን በራስ-ሰር ይዘጋል.
  • Bootstrap በአንድ ጊዜ አንድ ሞዳል መስኮት ብቻ ነው የሚደግፈው። ደካማ የተጠቃሚ ተሞክሮዎች ናቸው ብለን ስለምናምን የጎጆ ሞዳልሎች አይደገፉም።
  • ሞዳሎች ይጠቀማሉ position: fixed፣ ይህም አንዳንድ ጊዜ ስለ አሠራሩ ትንሽ የተለየ ሊሆን ይችላል። በሚቻልበት ጊዜ ከሌሎች አካላት ሊደርስ የሚችለውን ጣልቃገብነት ለማስወገድ የእርስዎን ሞዳል HTML በከፍተኛ ደረጃ ያስቀምጡት። .modalበሌላ ቋሚ ኤለመንት ውስጥ ሲሰቅሉ ችግሮች ሊያጋጥሙዎት ይችላሉ ።
  • አሁንም በድጋሚ፣ position: fixedበ ተንቀሳቃሽ መሳሪያዎች ላይ ሞዳልሎችን ስለመጠቀም አንዳንድ ማስጠንቀቂያዎች አሉ። ለዝርዝሮች የእኛን የአሳሽ ድጋፍ ሰነዶች ይመልከቱ።
  • ኤችቲኤምኤል 5 የትርጓሜውን ትርጉም እንዴት እንደሚገልፅ ምክንያት የኤችቲኤምኤል ባህሪው autofocusBootstrap ሞዳሎች ላይ ምንም ተጽእኖ የለውም። ተመሳሳዩን ውጤት ለማግኘት አንዳንድ ብጁ ጃቫስክሪፕት ይጠቀሙ፡
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>

የማይንቀሳቀስ ዳራ

backdrop ወደ static ሲዋቀር ሞዳል ከሱ ውጪ ጠቅ ሲደረግ አይዘጋም። እሱን ለመሞከር ከታች ያለውን ቁልፍ ጠቅ ያድርጉ።

<!-- 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>

ፍርግርግ በመጠቀም

የ 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 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እና በየትኛው አዝራር ጠቅ እንደተደረገ ይለያያል።data-bs-*

ከዚህ በታች በምሳሌ ኤችቲኤምኤል እና ጃቫስክሪፕት የተከተለ የቀጥታ ማሳያ ነው። ለበለጠ መረጃ በ ላይ ዝርዝሮችን ለማግኘት የሞዳል ሁነቶችን ሰነዶች ያንብቡ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" data-bs-dismiss="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" data-bs-dismiss="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="..."የሞዳል ርዕስን በመጥቀስ ወደ ማከል እርግጠኛ ይሁኑ .modalaria-describedbyበተጨማሪም፣ የሞዳል ንግግርዎን በ ላይ መግለጫ መስጠት ይችላሉ .modalrole="dialog"አስቀድመን በጃቫ ስክሪፕት ስለጨመርን ማከል እንደማያስፈልግ ልብ ይበሉ ።

የዩቲዩብ ቪዲዮዎችን በማካተት ላይ

የዩቲዩብ ቪዲዮዎችን በሞዳል ውስጥ መክተት በራስ ሰር መልሶ ማጫወትን ለማቆም እና ተጨማሪ ጃቫ ስክሪፕት በ Bootstrap ውስጥ እንደሌለ ይጠይቃል። ለበለጠ መረጃ ይህንን ጠቃሚ የቁልል ፍሰት ልጥፍ ይመልከቱ።

አማራጭ መጠኖች

ሞዳልሎች ሶስት የአማራጭ መጠኖች አሏቸው፣ በአሻሽያ ክፍሎች በኩል በ ሀ ላይ ሊቀመጡ ይችላሉ .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በካርታው እና በ loop ውስጥ ነው 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>

በጃቫስክሪፕት በኩል

ከአንድ የጃቫ ስክሪፕት መስመር ጋር ሞዳል ይፍጠሩ፡

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

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-bs-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-bs-backdrop=""

ስም ዓይነት ነባሪ መግለጫ
backdrop ቡሊያን ወይም ሕብረቁምፊው'static' true ሞዳል-backdrop አባልን ያካትታል። በአማራጭ፣ 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()

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

ክስተቶች

የቡትስትራፕ ሞዳል ክፍል ወደ ሞዳል ተግባር ለመያያዝ ጥቂት ክስተቶችን ያጋልጣል። ሁሉም የሞዳል ሁነቶች የሚተኮሱት በራሱ ሞዳል ላይ ነው (ማለትም በ <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...
})