Source

ሞዳል ዝብል እዩ።

ንናይ 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')
})

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

ኣብነታት

ኣብ ታሕቲ ስታትቲክ ሞዳል ኣብነት ኣሎ (ማለት its positionand displayhave been overridden)። ኣብዚ ሞዳል ​​ርእሲ፣ ሞዳል ኣካል (ን padding) ዘድሊ፣ ከምኡውን ሞዳል እግረ ጽሑፍ (ኣማራጺ) ተኻቲቶም ኣለዉ። ብዝተኻእለ መጠን ሞዳል ርእስታት ምስ ናይ ምብራር ተግባራት ከተካትቱ፡ ወይ ካልእ ግሉጽ ናይ ምብራር ስጉምቲ ክትህቡ ንሓትት።

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <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-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

ብቐጥታ ማእከል ዝገበረ

ነቲ ሞዳል ብቐጥታ ማእከል .modal-dialog-centeredንምግባር ናብ ምውሳኽ ።.modal-dialog

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

ቱልቲፕስን ፖፖቨርስን

ቱልቲፕስን ፖፖቨርን ከም ኣድላይነቱ ኣብ ውሽጢ ሞዳላት ክቕመጡ ይኽእሉ ። ሞዳላት ምስ ዝዕጸዉ፡ ዝኾነ ኣብ ውሽጢ ዘሎ ቱልቲፕስን ፖፖቨርን እውን ብኣውቶማቲክ ይስረዝ።

<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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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)
})

ኣኒሜሽን ምእላይ

ንምርኣይ ኣብ ክንዲ ዝሃስስ ብቐሊሉ ዝረኣዩ ሞዳላት፡ ነቲ .fadeክፍሊ ካብ ሞዳል ምልክትካ ኣውጽእዎ።

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

ዳይናሚክ ቁመት

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

ተበጻሕነት

ርግጸኛ ኩን ምውሳኽን role="dialog"፣ aria-labelledby="..."ነቲ ሞዳል ኣርእስቲ ብምውካስ፣ ናብ .modal፣ ከምኡውን role="document"ናብቲ .modal-dialogባዕሉ። aria-describedbyብተወሳኺ፡ መግለጺ ናይ ሞዳል ዝርርብኻ ብ on ክትህብ ትኽእል ኢኻ .modal።

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

ናይ ዩቱብ ቪድዮታት ኣብ ሞዳላት ምትእትታው ኣብ ቡትስትራፕ ዘይኮነ ተወሳኺ ጃቫስክሪፕት የድልዮ ንኣውቶማቲክ ምጽዋት ደው ንምባልን ​​ካልእን ይሓትት። ንዝያዳ ሓበሬታ ነዚ ሓጋዚ ዝኾነ Stack Overflow ዝብል ጽሑፍ ርአ ።

ኣማራጺ ዓቐናት

ሞዳላት ክልተ ኣማራጺ ዓቐናት ኣለዎም፣ ብመንገዲ መቐየሪ ክፍልታት ኣብ ሓደ ንኽቕመጡ ይርከቡ .modal-dialog። እዞም ዓቐናት ኣብ ዝተወሰኑ ናይ ምብታኽ ነጥብታት ረጊጾም ይኣትዉ እሞ ኣብ ዝጸበቡ ቪውፖርትታት ኣግማድ ስክሮልባር ከይፍጠር።

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

ኣጠቓቕማ

እቲ ሞዳል ፕላግ-ኢን ነቲ ሕቡእ ትሕዝቶኻ ብመሰረት ጠለብ፡ ብመንገዲ ባህርያት ዳታ ወይ ጃቫስክሪፕት ይቕይሮ። ብተወሳኺ .modal-openኣብቲ <body>to override default scrolling behavior ይውስኽን .modal-backdropካብቲ ሞዳል ወጻኢ ክትጥውቕ ከለኻ ንዝተራእዩ ሞዳላት ንምብራር ናይ ጠውቂ ቦታ ንምሃብ a ይፈጥርን።

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

ጃቫስክሪፕት ከይጸሓፍካ ሞዳል ኣንቀሳቕሶ። ኣብ ሓደ ተቖጻጻሪ ባእታ ኣቐምጥ data-toggle="modal"፣ ከም መጠወቒ፣ ምስ ሓደ data-target="#foo"ወይ href="#foo"ንሓደ ፍሉይ ሞዳል ንምዕላም ንምቕያር።

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

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

ንሓደ ሞዳል ምስ id myModalብሓደ መስመር ጃቫስክሪፕት ጸውዑ፤

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

ኣማራጺታት

ኣማራጺታት ብመንገዲ ዳታ ​​ባህርያት ወይ ጃቫስክሪፕት ክሓልፉ ይኽእሉ። ንባህርያት ዳታ፡ ስም ኣማራጺ ናብ ምውሳኽ data-፡ ከምቲ ኣብ data-backdrop="".

ሽም ዓይነት ትሑዝ መግለፂ
ድሕረ ባይታ boolean ወይ ድማ እቲ ሕብረ ቃላት'static' ሓቂ ሞዳል-ባክድሮፕ ባእታ ዘጠቓልል እዩ። ከም ኣማራጺ static፡ ነቲ ሞዳል ኣብ ጠውቂ ዘይዓጽዎ ድሕረ ባይታ ግለጽ።
ቁልፊ ሰሌዳ ቡልያን ዝብል እዩ። ሓቂ መፍትሕ ምህዳም ምስ ዝጽቀጥ ነቲ ሞዳል ይዓጽዎ።
ቀልቢ ምግባር ቡልያን ዝብል እዩ። ሓቂ ኣብ ዝጅምረሉ እዋን ትኹረት ኣብቲ ሞዳል የቐምጥ።
አርኢ ቡልያን ዝብል እዩ። ሓቂ ሞዳል ኣብ ዝጅምረሉ እዋን የርኢ።

ኣገባባት

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

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

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

.modal(options)

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

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

.modal('toggle')

ብኢድ ንሓደ ሞዳል ይቕይሮ። እቲ ሞዳል ብጭቡጥ ቅድሚ ምርኣዩ ወይ ምሕባኡ (ማለት ቅድሚ እቲ shown.bs.modalወይ hidden.bs.modalፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ።

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

.modal('show')

ብኢድ ሞዳል ይኸፍት። እቲ ሞዳል ብጭቡጥ ቅድሚ ምርኣዩ (ማለት ቅድሚ እቲ shown.bs.modalፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ።

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

.modal('hide')

ብኢድ ንሓደ ሞዳል ይሓብኦ። እቲ ሞዳል ብጭቡጥ ቅድሚ ምሕባኡ (ማለት ቅድሚ እቲ hidden.bs.modalፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ።

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

.modal('handleUpdate')

ቁመት ናይ ሓደ ሞዳል ክፉት ከሎ እንተተቐይሩ (ማለት ስክሮልባር እንተተራእዩ) ናይቲ ሞዳል ቦታ ብኢድካ ዳግማይ ኣስተኻኽሎ።

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

.modal('dispose')

ናይ ሓደ ባእታ ሞዳል የጥፍኦ።

ፍጻሜታት

ቡትስትራፕ ሞዳል ክላስ ንገለ ውሑዳት ፍጻመታት ናብ ሞዳል ተግባር ምትእስሳር የቃልዕ። ኩሎም ሞዳል ፍጻመታት ኣብቲ ሞዳል ባዕሉ (ማለት ኣብቲ <div class="modal">).

ዓይነት ፍጻመ መግለፂ
show.bs.modal ዝብል ጽሑፍ ኣሎ። showእዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ። ብሰንኪ ጠውቂ ዝመጽእ እንተኾይኑ፡ እቲ ዝተጠውቐ ባእታ ከም relatedTargetንብረት ናይቲ ፍጻመ ይርከብ።
ዝተራእየ.bs.modal እዚ ክስተት ዝትኮስ እቲ ሞዳል ንተጠቃሚ ርኡይ ምስ ዝኸውን እዩ (CSS ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)። ብሰንኪ ጠውቂ ዝመጽእ እንተኾይኑ፡ እቲ ዝተጠውቐ ባእታ ከም relatedTargetንብረት ናይቲ ፍጻመ ይርከብ።
hide.bs.modal ዝብል ጽሑፍ ኣሎ። እዚ ፍጻመ እዚ እቲ ናይ hideምሳሌ ሜላ ምስ ተጸውዐ ብቕጽበት ይትኮስ።
ሕቡእ.bs.modal ዝብል ጽሑፍ ኣሎ። እዚ ክስተት ዝትኮስ እቲ ሞዳል ካብ ተጠቃሚ ምሕባእ ምስ ወድአ እዩ (CSS ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)። 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})