ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
Check
in English

ሞዳል ዝብል እዩ።

ንናይ Bootstrap ናይ ጃቫስክሪፕት ሞዳል ፕላግ-ኢን ተጠቐም ንናይ ብርሃን ሳጹናት፣ ናይ ተጠቃሚ መፍለጢታት፣ ወይ ምሉእ ብምሉእ ብሕታዊ ትሕዝቶ ኣብ መርበብ ሓበሬታኻ ዝርርባት ንምውሳኽ።

ኣብዚ ገጽ

ከመይ ይሰርሕ

ቅድሚ ብ Bootstrap's modal component ምጅማርና ኣብ ቀረባ እዋን ናይ ምልክት ዝርዝር ኣማራጺታትና ስለዝተቐየሩ ነዞም ዝስዕቡ ምንባብኩም ኣረጋግጹ።

  • ሞዳላት ብኤችቲኤምኤል፣ ሲኤስኤስን ጃቫስክሪፕትን ዝተሃንጹ እዮም። ኣብ ልዕሊ ኩሉ ካልእ ኣብቲ ሰነድ ተቐሚጦም ስክሮል ካብቲ የወግዱ <body>እሞ ሞዳል ትሕዝቶ ኣብ ክንዲ ስክሮል ይገብር።
  • ኣብቲ ሞዳል “backdrop” ምጥዋቕካ ነቲ ሞዳል ብኣውቶማቲክ ይዓጽዎ።
  • ቡትስትራፕ ኣብ ሓደ እዋን ሓደ ሞዳል መስኮት ጥራይ እዩ ዝድግፍ። ዝተሰነዱ ሞዳላት ድኹም ተመኩሮ ተጠቀምቲ እዮም ኢልና ስለ እንኣምኖም ኣይድገፉን እዮም።
  • Modals use position: fixed, እዚ ሓደ ሓደ ግዜ ብዛዕባ ኣቀራርባኡ ቁሩብ ፍሉይ ክኸውን ይኽእል። ብዝተኻእለ መጠን፡ ካብ ካልኦት ባእታታት ክመጽእ ዝኽእል ምትእትታው ንምክልኻል፡ ሞዳል ኤችቲኤምኤልካ ኣብ ላዕለዋይ ደረጃ ቦታ ኣቐምጦ። .modalኣብ ውሽጢ ካልእ ጽኑዕ ባእታ a ክትሰፍር ከለኻ ጸገማት ከጋጥመካ ተኽእሎ ኣሎ ።
  • ሕጂ ውን ብሰንኪ position: fixed, ገለ መጠንቀቕታታት ምስ ምጥቃም ሞዳላት ኣብ ሞባይል መሳርሒታት ኣለዉ። ንዝርዝር ሓበሬታ ኣብ መርበብ ሓበሬታና ናይ ደገፍ ሰነዳት ርአ ።
  • ብሰንኪ HTML5 ትርጉሙ ብኸመይ ከም ዝገልጾ ፡ እቲ autofocusHTML ባህሪ ኣብ Bootstrap ሞዳላት ዝኾነ ጽልዋ የብሉን። ተመሳሳሊ ውጽኢት ንምርካብ ገለ ብሕታዊ ጃቫስክሪፕት ተጠቐም፤
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
ናይዚ ኣካል ተንቀሳቓሲ ውጽኢት ኣብቲ ናይ prefers-reduced-motionሚድያ ሕቶ ዝምርኮስ እዩ። ኣብቲ ናይ ተበጻሕነት ሰነድና ኣብቲ ዝተቐነሰ ምንቅስቓስ ዝብል ክፍሊ ርአ ።

ንዲሞታትን መምርሒታት ኣጠቓቕማን ምንባብ ቀጽል።

ኣብነታት

ኣብ ታሕቲ ስታቲክ ሞዳል ኣብነት ኣሎ (ማለት its positionand displayhave been overridden)። ኣብዚ ሞዳል ​​ርእሲ፣ ሞዳል ኣካል (ን 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" 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 grid system ኣብ .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-* ።

ኣብ ታሕቲ ቀጥታዊ ዲሞ ስዒቡ ኣብነት HTMLን ጃቫስክሪፕትን ኣሎ። ንዝያዳ ሓበሬታ ፡ ንዝርዝር ሓበሬታ ኣብ 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-targetand 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ብተወሳኺ፡ መግለጺ ናይ ሞዳል ዝርርብኻ ብ on ክትህብ ትኽእል ኢኻ .modal። role="dialog"ድሮ ብጃቫስክሪፕት ስለ ዝወሰኽናዮ ምውሳኽ ኣየድልየኩምን ምዃኑ ኣስተውዕል ።

ናይ ዩቱብ ቪድዮታት ምትእትታው

ናይ ዩቱብ ቪድዮታት ኣብ ሞዳላት ምትእትታው ኣብ ቡትስትራፕ ዘይኮነ ተወሳኺ ጃቫስክሪፕት የድልዮ ንኣውቶማቲክ ምጽዋት ደው ንምባልን ​​ካልእን ይሓትት። ንዝያዳ ሓበሬታ ነዚ ሓጋዚ ዝኾነ 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>

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

ኣብ v5.2.0 ተወሰኸ

ከም ኣካል ናይቲ ቡትስትራፕ ዝምዕብል ዘሎ 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};

ሳስ ተለዋዋጢ ረቛሒታት

$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ካርታን ሉፕን ኣብ 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ይሽፍኖን ካብቲ ሞዳል ወጻኢ ክትጥውቕ ከለኻ ንዝተራእዩ ሞዳላት ንምስሓብ ናይ ምጥዋቕ ቦታ ንምሃብ a ይፈጥርን።

ብመንገዲ ባህርያት ዳታ

ቶግል ምግባር

ጃቫስክሪፕት ከይጸሓፍካ ሞዳል ኣንቀሳቕሶ። ኣብ ሓደ ተቖጻጻሪ ባእታ ኣቐምጥ 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 Authoring Practices Guide dialog (modal) pattern ከምዘይሰማማዕ ኣብ ግምት ኣእቱ ። እዚ ብናይ ገዛእ ርእስኻ ሓደጋ ግበር።

ብመንገዲ ጃቫስክሪፕት።

ብሓደ መስመር ጃቫስክሪፕት ሞዳል ፍጠር፤

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 ጀሚሩ ኩሎም ኣካላት ንሓደ ፈተነ ዝተሓዝአ ዳታ ባህሪ ይድግፉ እዚ data-bs-configድማ ቀሊል ውቅር ኣካላት ከም JSON ሕብረ ቃላት ከዕቁብ ይኽእል። ሓደ ባእታ data-bs-config='{"delay":0, "title":123}'and data-bs-title="456"attributes ምስ ዝህልዎ፡ እቲ ናይ መወዳእታ titleዋጋ ክኸውን እዩ 456፡ እቶም ዝተፈላለዩ ዳታ ባህርያት ድማ ኣብ data-bs-config. ብተወሳኺ፡ ዝጸንሑ ባህርያት ዳታ ከም data-bs-delay='{"show":0,"hide":150}'.

ሽም ዓይነት ትሑዝ መግለፂ
backdrop ቡልያን፣'static' true ሞዳል-ባክድሮፕ ባእታ ዘጠቓልል እዩ። ከም ኣማራጺ static፡ ምስ ጠወቕካ ነቲ ሞዳል ዘይዓጽዎ ድሕረ ባይታ ግለጽ።
focus ቡልያን ዝብል እዩ። true ኣብ ዝጅምረሉ እዋን ትኹረት ኣብቲ ሞዳል የቐምጥ።
keyboard ቡልያን ዝብል እዩ። true escape key ምስ ዝጽቀጥ ነቲ ሞዳል ይዓጽዎ።

ኣገባባት

ዘይተመዓራረዩ ኣገባባትን ምስግጋራትን።

ኩሎም ናይ ኤፒኣይ ሜላታት ዘይተመዓራረዩ ኮይኖም ምስግጋር ይጅምሩ ። እቲ ምስግጋር ምስ ተጀመረ ግን ከኣ ቅድሚ ምውድኡ ናብቲ ደዋሊ ይምለሱ ። ብተወሳኺ፡ ኣብ ሓደ መሰጋገሪ ኣካል ዝግበር ናይ ሜላ ጻውዒት ዕሽሽ ክበሃል እዩ .

ንዝያዳ ሓበሬታ ኣብ ሰነድ ጃቫስክሪፕትና ርአ ።

ናይ ምሕላፍ ኣማራጺታት

ትሕዝቶኻ ከም ሞዳል የነቓቕሖ። ሓደ ኣማራጺ ኣማራጺታት ይቕበል object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
ሜላ መግለፂ
dispose ናይ ሓደ ባእታ ሞዳል የጥፍኦ። (ኣብ DOM element ዝተዓቀበ ዳታ የወግድ)
getInstance ምስ ሓደ DOM element ዝተኣሳሰር ሞዳል ኢንስታንስ ክትረክብ ዘኽእለካ ስታቲክ ሜላ።
getOrCreateInstance ምስ ሓደ DOM element ዝተኣሳሰር ሞዳል ኢንስታንስ ክትረክብ ዘኽእለካ ስታትቲክ ሜላ፣ ወይ ድማ እንተዘይተጀሚሩ ሓድሽ ክትፈጥር ዘኽእለካ።
handleUpdate ቁመት ናይ ሓደ ሞዳል ክፉት ከሎ እንተተቐይሩ (ማለት ስክሮልባር እንተተራእዩ) ናይቲ ሞዳል ቦታ ብኢድካ ዳግማይ ኣስተኻኽሎ።
hide ብኢድ ንሓደ ሞዳል ይሓብኦ። እቲ ሞዳል ብጭቡጥ ቅድሚ ምሕባኡ (ማለት ቅድሚ እቲ hidden.bs.modalፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ።
show ብኢድ ሞዳል ይኸፍት። እቲ ሞዳል ብጭቡጥ ቅድሚ ምርኣዩ (ማለት ቅድሚ እቲ shown.bs.modalፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። relatedTargetከምኡ’ውን፡ ኣብ ሞዳላዊ ፍጻመታት (ከም ንብረት) ክቕበል ዝኽእል DOM ባእታ ከም ሞጎተ ክትሓልፎ ትኽእል ኢኻ ። (ማለት 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...
})