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

ሞዳል

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

በዚህ ገጽ ላይ

እንዴት እንደሚሰራ

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

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

myModal.addEventListener('shown.bs.modal', () => {
  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 ወደ ቋሚ ሲዋቀር ሞዳል ከሱ ውጪ ጠቅ ሲደረግ አይዘጋም። እሱን ለመሞከር ከታች ያለውን ቁልፍ ጠቅ ያድርጉ።

<!-- 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" data-bs-toggle="popover" 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="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" 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 ።

html 
<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>
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const 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.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = `New message to ${recipient}`
  modalBodyInput.value = recipient
})

በሞዳሎች መካከል ይቀያይሩ

በአንዳንድ ብልህ የባህሪዎች አቀማመጥ በበርካታ ሞዳሎች መካከል data-bs-targetይቀያይሩ data-bs-toggle። ለምሳሌ የይለፍ ቃል ዳግም ማስጀመሪያ ሞዳል ከተከፈተው የመግቢያ ሞዳል ውስጥ መቀየር ትችላለህ። እባክዎን ያስተውሉ ብዙ ሞዳልሎች በተመሳሳይ ጊዜ ሊከፈቱ አይችሉም - ይህ ዘዴ በቀላሉ በሁለት የተለያዩ ሞዳልሎች መካከል ይቀየራል።

የመጀመሪያውን ሞዳል ይክፈቱ
html 
<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"አስቀድመን በጃቫስክሪፕት ስለጨመርን ማከል እንደማያስፈልግህ አስተውል ።

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

የዩቲዩብ ቪዲዮዎችን በሞዳል ውስጥ መክተት በራስ ሰር መልሶ ማጫወትን ለማቆም እና ተጨማሪ ጃቫ ስክሪፕት በ 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>

CSS

ተለዋዋጮች

በ v5.2.0 ውስጥ ተጨምሯል

እንደ የBootstrap የ CSS ተለዋዋጮች አቀራረብ አካል፣ ሞዳልሎች አሁን ለተሻሻለ ቅጽበታዊ ማበጀት የአካባቢ CSS ተለዋዋጮችን .modalይጠቀማሉ ። .modal-backdropየCSS ተለዋዋጮች እሴቶች በ Sass በኩል ተቀናብረዋል፣ ስለዚህ Sass ማበጀት አሁንም ይደገፋል።

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
  
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Sass ተለዋዋጮች

$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:        var(--#{$prefix}border-color-translucent);
$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:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-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-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$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,
      .modal-footer {
        @include border-radius(0);
      }

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

አጠቃቀም

የሞዳል ፕለጊን ድብቅ ይዘትዎን በፍላጎት ፣በመረጃ ባህሪዎች ወይም በጃቫስክሪፕት በኩል ይቀየራል። እንዲሁም ነባሪ የማሸብለል ባህሪን ይሽራል እና .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>
ሞዳልን የማሰናበት ሁለቱም መንገዶች የሚደገፉ ቢሆኑም፣ ከሞዳል ውጭ ማሰናበት ከ ARIA የደራሲ ልምምዶች መመሪያ የንግግር (ሞዳል) ንድፍ ጋር እንደማይዛመድ ያስታውሱ ። ይህንን በራስዎ ሃላፊነት ያድርጉ።

በጃቫስክሪፕት በኩል

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

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

አማራጮች

አማራጮች በውሂብ ባህሪያት ወይም በጃቫ ስክሪፕት ሊተላለፉ ስለሚችሉ፣ በ ውስጥ እንዳለ የአማራጭ ስም ወደ ላይ ማከል data-bs-ይችላሉ data-bs-animation="{value}"። በመረጃ ባህሪያት በኩል አማራጮችን ሲያስተላልፉ የአማራጭ ስም የጉዳይ አይነትን ከ " camelcase " ወደ " kebab-case " መቀየርዎን ያረጋግጡ. ለምሳሌ, data-bs-custom-class="beautifier"በምትኩ ይጠቀሙ data-bs-customClass="beautifier".

ከ Bootstrap 5.2.0 ጀምሮ፣ ሁሉም አካላት ቀላል የአካል ክፍሎችን እንደ JSON string ውቅረት ሊያስቀምጥ የሚችል በሙከራ የተያዘ የውሂብ ባህሪን ይደግፋሉ። data-bs-configአንድ ኤለመንት ሲኖረው data-bs-config='{"delay":0, "title":123}'እና data-bs-title="456"ባህሪያቱ ሲኖረው፣ የመጨረሻው titleእሴት ይሆናል 456እና የተለዩ የውሂብ ባህሪያት በ ላይ የተሰጡ እሴቶችን ይሽራሉ data-bs-config። በተጨማሪም፣ ነባር የውሂብ ባህሪያት እንደ JSON ያሉ እሴቶችን ማኖር ይችላሉ data-bs-delay='{"show":0,"hide":150}'።

ስም ዓይነት ነባሪ መግለጫ
backdrop ቡሊያን፣'static' true ሞዳል-backdrop አባልን ያካትታል። በአማራጭ፣ staticጠቅ ሲደረግ ሞዳልን የማይዘጋው ለbackdrop ይግለጹ።
focus ቡሊያን true ሲጀመር ትኩረቱን በሞዳል ላይ ያስቀምጣል.
keyboard ቡሊያን true የማምለጫ ቁልፍ ሲጫን ሞዳልን ይዘጋል።

ዘዴዎች

ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች

ሁሉም የኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግር ይጀምራሉ ። ሽግግሩ እንደተጀመረ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ። በተጨማሪም, በመሸጋገሪያ አካል ላይ የሚደረግ ዘዴ ጥሪ ችላ ይባላል .

ለበለጠ መረጃ የእኛን ጃቫስክሪፕት ሰነድ ይመልከቱ ።

አማራጮችን ማለፍ

ይዘትዎን እንደ ሞዳል ያነቃል። አማራጭ አማራጮችን ይቀበላል object።

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
ዘዴ መግለጫ
dispose የአንድ ንጥረ ነገር ሞዳልን ያጠፋል. (የተከማቸ ውሂብ በ DOM አባል ላይ ያስወግዳል)
getInstance ከDOM ኤለመንት ጋር የተገናኘውን ሞዳል ምሳሌ እንድታገኙ የሚያስችል የማይንቀሳቀስ ዘዴ።
getOrCreateInstance ከDOM ኤለመንት ጋር የተገናኘውን የሞዳል ምሳሌ እንድታገኙ ወይም ካልተጀመረ አዲስ ለመፍጠር የሚያስችል የማይንቀሳቀስ ዘዴ ።
handleUpdate የሞዳል ሞዳል ክፍት ሲሆን ከፍታው ከተቀየረ (ማለትም የማሸብለያ አሞሌ ከታየ) የሞዳልን ቦታ እራስዎ ያስተካክሉት።
hide ሞዳልን በእጅ ይደብቃል። ሞዳል በትክክል ከመደበቅ በፊት (ማለትም hidden.bs.modalክስተቱ ከመፈጠሩ በፊት) ወደ ደዋዩ ይመለሳል።
show ሞዳልን በእጅ ይከፍታል። ሞጁሉ ከመታየቱ በፊት (ማለትም ክስተቱ ከመፈጠሩ በፊት) ወደ ደዋዩ ይመለሳል ። እንዲሁም፣ በሞዳል ሁነቶች (እንደ ንብረቱ) shown.bs.modalመቀበል የሚችል የ DOM አባል እንደ ክርክር ማለፍ ይችላሉ ። relatedTarget(ማለትም const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle ሞዳልን በእጅ ይቀየራል። ሞጁሉ በትክክል ከመታየቱ ወይም ከመደበቅ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደshown.bs.modal ደዋዩ ይመለሳል hidden.bs.modal።

ክስተቶች

የቡትስትራፕ ሞዳል ክፍል ወደ ሞዳል ተግባር ለመያያዝ ጥቂት ክስተቶችን ያጋልጣል። ሁሉም የሞዳል ሁነቶች የሚተኮሱት በራሱ ሞዳል ላይ ነው (ማለትም በ <div class="modal">)።

ክስተት መግለጫ
hide.bs.modal hideየምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
hidden.bs.modal ሞዱሉ ከተጠቃሚው ተደብቆ ሲጠናቀቅ ይህ ክስተት የሚነድ ነው (የCSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
hidePrevented.bs.modal ይህ ክስተት ሞዳል ሲታይ፣ ዳራው ሲሆን staticእና ከሞዳል ውጭ ጠቅ ሲደረግ ይቃጠላል። የማምለጫ ቁልፉ ሲጫን እና keyboardአማራጩ ሲቀናበር ክስተቱ እንዲሁ ይቃጠላል false።
show.bs.modal showየምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል . በአንድ ጠቅታ ከተከሰተ፣ ጠቅ የተደረገው አካል እንደ relatedTargetየዝግጅቱ ንብረት ይገኛል።
shown.bs.modal ይህ ክስተት ሞጁሉ ለተጠቃሚው እንዲታይ ከተደረገ (የ CSS ሽግግሮች እስኪጠናቀቅ ድረስ ይጠብቃል) ይባረራል። በአንድ ጠቅታ ከተከሰተ፣ ጠቅ የተደረገው አካል እንደ relatedTargetየዝግጅቱ ንብረት ይገኛል። 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})