ሞዳል ዝብል እዩ።

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

ከመይ ይሰርሕ

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

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

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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-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-toggle="modal" data-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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-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-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

ነዊሕ ትሕዝቶ ምጥዋይ

ሞዳላት ንናይ ተጠቃሚ ቪውፖርት ወይ መሳርሒ ኣዝዮም ነዊሕ ምስ ዝኾኑ፡ ካብቲ ገጽ ባዕሉ ነጻ ኮይኖም ይስክሩ። እንታይ ማለትና ምዃኑ ንምርኣይ ኣብ ታሕቲ ዘሎ ዲሞ ፈትኑ።