ሞዳል ዝብል እዩ።
ንናይ Bootstrap ናይ ጃቫስክሪፕት ሞዳል ፕላግ-ኢን ተጠቐም ንናይ ብርሃን ሳጹናት፣ ናይ ተጠቃሚ መፍለጢታት፣ ወይ ምሉእ ብምሉእ ብሕታዊ ትሕዝቶ ኣብ መርበብ ሓበሬታኻ ዝርርባት ንምውሳኽ።
ከመይ ይሰርሕ
ቅድሚ ብ Bootstrap's modal component ምጅማርና ኣብ ቀረባ እዋን ናይ ምልክት ዝርዝር ኣማራጺታትና ስለዝተቐየሩ ነዞም ዝስዕቡ ምንባብኩም ኣረጋግጹ።
- ሞዳላት ብኤችቲኤምኤል፣ ሲኤስኤስን ጃቫስክሪፕትን ዝተሃንጹ እዮም። ኣብ ልዕሊ ኩሉ ካልእ ኣብቲ ሰነድ ተቐሚጦም ስክሮል ካብቲ የወግዱ
<body>
እሞ ሞዳል ትሕዝቶ ኣብ ክንዲ ስክሮል ይገብር። - ኣብቲ ሞዳል “backdrop” ምጥዋቕካ ነቲ ሞዳል ብኣውቶማቲክ ይዓጽዎ።
- ቡትስትራፕ ኣብ ሓደ እዋን ሓደ ሞዳል መስኮት ጥራይ እዩ ዝድግፍ። ዝተሰነዱ ሞዳላት ድኹም ተመኩሮ ተጠቀምቲ እዮም ኢልና ስለ እንኣምኖም ኣይድገፉን እዮም።
- Modals use
position: fixed
, እዚ ሓደ ሓደ ግዜ ብዛዕባ ኣቀራርባኡ ቁሩብ ፍሉይ ክኸውን ይኽእል። ብዝተኻእለ መጠን፡ ካብ ካልኦት ባእታታት ክመጽእ ዝኽእል ምትእትታው ንምክልኻል፡ ሞዳል ኤችቲኤምኤልካ ኣብ ላዕለዋይ ደረጃ ቦታ ኣቐምጦ።.modal
ኣብ ውሽጢ ካልእ ጽኑዕ ባእታ a ክትሰፍር ከለኻ ጸገማት ከጋጥመካ ተኽእሎ ኣሎ ። - ሕጂ ውን ብሰንኪ
position: fixed
, ገለ መጠንቀቕታታት ምስ ምጥቃም ሞዳላት ኣብ ሞባይል መሳርሒታት ኣለዉ። ንዝርዝር ሓበሬታ ኣብ መርበብ ሓበሬታና ናይ ደገፍ ሰነዳት ርአ ። - ብሰንኪ HTML5 ትርጉሙ ብኸመይ ከም ዝገልጾ ፡ እቲ
autofocus
HTML ባህሪ ኣብ Bootstrap ሞዳላት ዝኾነ ጽልዋ የብሉን። ተመሳሳሊ ውጽኢት ንምርካብ ገለ ብሕታዊ ጃቫስክሪፕት ተጠቐም፤
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
ሚድያ ሕቶ ዝምርኮስ እዩ። ኣብቲ ናይ ተበጻሕነት ሰነድና ኣብቲ ዝተቐነሰ ምንቅስቓስ ዝብል ክፍሊ ርአ
።
ንዲሞታትን መምርሒታት ኣጠቓቕማን ምንባብ ቀጽል።
ኣብነታት
ሞዳል ባእታታት
ኣብ ታሕቲ ስታትቲክ ሞዳል ኣብነት ኣሎ (ማለት its position
and display
have 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">×</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">×</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">×</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">×</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 ክትህብ ትኽእል ኢኻ .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-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 ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)። |
hidePrevented.bs.modal ዝብል ጽሑፍ ኣሎ። | እዚ ፍጻመ እዚ ሞዳል ምስ ዝረአ ይትኮስ፣ ድሕረ ባይታኡ ምስ static ዝኸውንን ካብ ሞዳል ወጻኢ ዝግበር ጠውቂ ወይ ምጽቃጥ መፍትሕ ምህዳም ምስ ኣማራጺ ሰሌዳ ቁልፊ ወይ data-keyboard ናብ false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})