in English

ሞዳል ዝብል እዩ።

ንናይ 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>

ነዊሕ ትሕዝቶ ምጥዋይ

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

ብተወሳኺ ነቲ ሞዳል ኣካል ንምስግጋር ዘኽእል ስክሮል ዝግበረሉ ሞዳል ክትፈጥር ትኽእል ኢኻ .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-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 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 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-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>

ዝተፈላለየ ሞዳል ትሕዝቶ

ኩሎም ቁሩብ ዝተፈላለየ ትሕዝቶ ዘለዎም ሓደ ዓይነት ሞዳል ዝጅምሩ ዕስለ መጠወቒታት ኣለዉኻ? ትሕዝቶ ናይቲ ሞዳል ከከምቲ ዝተጠወቐ መጠወቒ ንምቕያር ባህርያትን HTMLevent.relatedTarget ን ተጠቐም (ምናልባት ብመንገዲ jQuery )።data-*

ኣብ ታሕቲ ቀጥታዊ ዲሞ ስዒቡ ኣብነት HTMLን ጃቫስክሪፕትን ኣሎ። ንዝያዳ ሓበሬታ ፡ ንዝርዝር ሓበሬታ ኣብ relatedTarget.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <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-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

ኣኒሜሽን ምቕያር

እቲ $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').modal('handleUpdate')ቁመት ናይ ሓደ ሞዳል ክፉት ከሎ እንተተቐይሩ ፡ ስክሮልባር ንኸይመጽእ፡ ኣቀማምጣ ናይቲ ሞዳል ዳግማይ ንምትዕርራይ ክትድውል ኣለካ ።

ተበጻሕነት

ርግጸኛ ኩን ምውሳኽ aria-labelledby="..."፣ ነቲ ሞዳል ኣርእስቲ ብምውካስ፣ ናብ .modal. aria-describedbyብተወሳኺ፡ መግለጺ ናይ ሞዳል ዝርርብኻ ብ on ክትህብ ትኽእል ኢኻ .modalrole="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>

ኣጠቓቕማ

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

Via data attributes

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Via JavaScript

Call a modal with id myModal with a single line of JavaScript:

$('#myModal').modal(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

Name Type Default Description
backdrop boolean or the string 'static' true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard boolean true Closes the modal when escape key is pressed
focus boolean true Puts the focus on the modal when initialized.
show boolean true Shows the modal when initialized.

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

.modal(options)

Activates your content as a modal. Accepts an optional options object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

$('#myModal').modal('toggle')

.modal('show')

Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).

$('#myModal').modal('show')

.modal('hide')

Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).

$('#myModal').modal('hide')

.modal('handleUpdate')

Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).

$('#myModal').modal('handleUpdate')

.modal('dispose')

Destroys an element’s modal.

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event Type Description
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modal This event is fired immediately when the hide instance method has been called.
hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.modal እዚ ፍጻመ እዚ ሞዳል ​​ምስ ዝረአ ይትኮስ፣ ድሕረ ባይታኡ ምስ staticዝኸውንን ካብ ሞዳል ወጻኢ ዝግበር ጠውቂ ወይ ምጽቃጥ መፍትሕ ምህዳም ምስ ኣማራጺ ሰሌዳ ቁልፊ ወይ data-keyboardናብ false.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})