ሞዳል
ለብርሃን ሳጥኖች፣ የተጠቃሚ ማሳወቂያዎች ወይም ሙሉ ለሙሉ ብጁ ይዘት ወደ ጣቢያዎ መገናኛዎችን ለመጨመር የ Bootstrap's JavaScript ሞዳል ተሰኪን ይጠቀሙ።
እንዴት እንደሚሰራ
በBootstrap ሞዳል አካል ከመጀመራችን በፊት፣የእኛ ምናሌ አማራጮች በቅርብ ጊዜ ስለተቀየሩ የሚከተለውን ማንበብዎን እርግጠኛ ይሁኑ።
- ሞዳልሎች በኤችቲኤምኤል፣ ሲኤስኤስ እና ጃቫስክሪፕት የተገነቡ ናቸው። እነሱ በሰነዱ ው���ጥ ካሉት ሁሉም ነገሮች ላይ ተቀምጠዋል እና
<body>
በምትኩ የሞዳል ይዘት እንዲሸብልል ጥቅልሉን ያስወግዱት። - ሞዳል "backdrop" ላይ ጠቅ ማድረግ ሞዳልን በራስ-ሰር ይዘጋል.
- Bootstrap በአንድ ጊዜ አንድ ሞዳል መስኮት ብቻ ነው የሚደግፈው። ደካማ የተጠቃሚ ተሞክሮዎች ናቸው ብለን ስለምናምን የጎጆ ሞዳልሎች አይደገፉም።
- ሞዳሎች ይጠቀማሉ
position: fixed
፣ ይህም አንዳንድ ጊዜ ስለ አሠራሩ ትንሽ የተለየ ሊሆን ይችላል። በሚቻልበት ጊዜ ከሌሎች አካላት ሊደርስ የሚችለውን ጣልቃገብነት ለማስወገድ የእርስዎን ሞዳል HTML በከፍተኛ ደረጃ ያስቀምጡት።.modal
በሌላ ቋሚ ኤለመንት ውስጥ ሲሰቅሉ ችግሮች ሊያጋጥሙዎት ይችላሉ ። - አሁንም በድጋሚ፣
position: fixed
በ ተንቀሳቃሽ መሳሪያዎች ላይ ሞዳልሎችን ስለመጠቀም አንዳንድ ማስጠንቀቂያዎች አሉ። ለዝርዝሮች የእኛን የአሳሽ ድጋፍ ሰነዶች ይመልከቱ። - ኤችቲኤምኤል 5 የትርጓሜውን ትርጉም እንዴት እንደሚገልፅ ምክንያት የኤችቲኤምኤል ባህሪው በ
autofocus
Bootstrap ሞዳሎች ላይ ምንም ተጽእኖ የለውም። ተመሳሳዩን ውጤት ለማግኘት አንዳንድ ብጁ ጃቫስክሪፕት ይጠቀሙ፡
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
በመገናኛ ብዙሃን ጥያቄ ላይ የተመሰረተ ነው. የእኛን የተደራሽነት ሰነድ የተቀነሰውን እንቅስቃሴ ክፍል ይመልከቱ
።
ማሳያዎችን እና የአጠቃቀም መመሪያዎችን ማንበብዎን ይቀጥሉ።
ምሳሌዎች
ሞዳል አካላት
ከዚህ በታች የማይንቀሳቀስ ሞዳል ምሳሌ ነው (ትርጉሙ position
እና display
ተሽሯል)። የሞዳል ራስጌ፣ የሞዳል አካል (የሚፈለገው 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>
የማይንቀሳቀስ ዳራ
backdrop ወደ static ሲዋቀር ሞዳል ከሱ ውጪ ጠቅ ሲደረግ አይዘጋም። እሱን ለመሞከር ከታች ያለውን ቁልፍ ጠቅ ያድርጉ።
<!-- 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 popover-test" 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="#" 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 ፍርግርግ ስርዓቱን በሞዳል ውስጥ በመክተት .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-*
ከዚህ በታች በምሳሌ ኤችቲኤምኤል እና ጃቫስክሪፕት የተከተለ የቀጥታ ማሳያ ነው። ለበለጠ መረጃ በ ላይ ዝርዝሮችን ለማግኘት የሞዳል ሁነቶችን ሰነዶች ያንብቡrelatedTarget
።
<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>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var 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.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
በሞዳሎች መካከል ይቀያይሩ
በአንዳንድ ብልህ የባህሪዎች አቀማመጥ በበርካታ ሞዳሎች መካከል data-bs-target
ይቀያይሩ data-bs-toggle
። ለምሳሌ የይለፍ ቃል ዳግም ማስጀመሪያ ሞዳል ከተከፈተው የመግቢያ ሞዳል ውስጥ መቀየር ትችላለህ። እባክዎን ያስተውሉ ብዙ ሞዳልሎች በተመሳሳይ ጊዜ ሊከፈቱ አይችሉም - ይህ ዘዴ በቀላሉ በሁለት የተለያዩ ሞዳልሎች መካከል ይቀየራል።
<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" data-bs-dismiss="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" data-bs-dismiss="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
በተጨማሪም፣ የሞዳል ንግግርዎን በ ላይ መግለጫ መስጠት ይችላሉ .modal
። role="dialog"
አስቀድመን በጃቫ ስክሪፕት ስለጨመርን ማከል እንደማያስፈልግ ልብ ይበሉ ።
የዩቲዩብ ቪዲዮዎችን በማካተት ላይ
የዩቲዩብ ቪዲዮዎችን በሞዳል ውስጥ መክተት በራስ ሰር መልሶ ማጫወትን ለማቆም እና ተጨማሪ ጃቫ ስክሪፕት በ Bootstrap ውስጥ እንደሌለ ይጠይቃል። ለበለጠ መረጃ ይህንን ጠቃሚ የቁልል ፍሰት ልጥፍ ይመልከቱ።
አማራጭ መጠኖች
ሞዳልሎች ሶስት የአማራጭ መጠኖች አሏቸው፣ በአሻሽያ ክፍሎች በኩል በ ሀ ላይ ሊቀመጡ ይችላሉ .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>
ሙሉ ማያ ሞዳል
ሌላው መሻር የተጠቃሚውን መመልከቻ የሚሸፍን ሞዳል ብቅ የማለት አማራጭ ነው፣ በ a ላይ በተቀመጡ የአሻሽያ ክፍሎች ይገኛል .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>
ሳስ
ተለዋዋጮች
$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: rgba($black, .2);
$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: $border-color;
$modal-footer-border-color: $modal-header-border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-footer-border-width: $modal-header-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-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
በካርታው እና በ loop ውስጥ ነው 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 {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}
አጠቃቀም
የሞዳል ፕለጊን ድብቅ ይዘትዎን በፍላጎት ፣በመረጃ ባህሪዎች ወይም በጃቫስክሪፕት በኩል ይቀየራል። እንዲሁም ነባሪ የማሸብለል ባህሪን ይሽራል እና .modal-backdrop
ከሞዳል ውጭ ጠቅ ሲያደርጉ የሚታዩ ሞዳሎችን ለማሰናበት የጠቅ ቦታን ያመነጫል።
በውሂብ ባህሪያት በኩል
ጃቫ ስክሪፕት ሳይጽፉ ሞዳልን ያግብሩ። አንድን ወይም የተወሰነ ሞዳል ለመቀያየር ዒላማ ለማድረግ በተቆጣጣሪ data-bs-toggle="modal"
ኤለመንት ላይ እንደ አዝራር ያቀናብሩ ።data-bs-target="#foo"
href="#foo"
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
በጃቫስክሪፕት በኩል
ከአንድ የጃቫ ስክሪፕት መስመር ጋር ሞዳል ይፍጠሩ፡
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
አማራጮች
አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-bs-
እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-bs-backdrop=""
።
ስም | ዓይነት | ነባሪ | መግለጫ |
---|---|---|---|
backdrop |
ቡሊያን ወይም ሕብረቁምፊው'static' |
true |
ሞዳል-backdrop አባልን ያካትታል። በአማራጭ፣ static ጠቅ ሲደረግ ሞዳልን የማይዘጋው ለጀርባ ይግለጹ። |
keyboard |
ቡሊያን | true |
የማምለጫ ቁልፍ ሲጫን ሞዳልን ይዘጋል። |
focus |
ቡሊያን | true |
ሲጀመር ትኩረቱን በሞዳል ላይ ያስቀምጣል. |
ዘዴዎች
ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች
ሁሉም የኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግር ይጀምራሉ ። ሽግግሩ እንደተጀመረ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ። በተጨማሪም, በመሸጋገሪያ አካል ላይ የሚደረግ ዘዴ ጥሪ ችላ ይባላል .
አማራጮችን ማለፍ
ይዘትዎን እንደ ሞዳል ያነቃል። አማራጭ አማራጮችን ይቀበላል object
።
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
ቀያይር
ሞዳልን በእጅ ይቀየራል። ሞጁሉ በትክክል ከመታየቱ ወይም ከመደበቅ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደshown.bs.modal
ደዋዩ ይመለሳል hidden.bs.modal
።
myModal.toggle()
አሳይ
ሞዳልን በእጅ ይከፍታል። ሞዳል ከመታየቱ በፊት (ማለትም shown.bs.modal
ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል።
myModal.show()
relatedTarget
እንዲሁም፣ በሞዳል ሁነቶች (እንደ ንብረቱ) መቀበል የሚችል የ DOM አባል እንደ ክርክር ማለፍ ይችላሉ ።
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
መደበቅ
ሞዳልን በእጅ ይደብቃል። ሞዳል በትክክል ከመደበቅ በፊት (ማለትም hidden.bs.modal
ክስተቱ ከመፈጠሩ በፊት) ወደ ደዋዩ ይመለሳል።
myModal.hide()
እጀታ አዘምን
የሞዳል ሞዳል ክፍት ሲሆን ከፍታው ከተቀየረ (ማለትም የማሸብለያ አሞሌ ከታየ) የሞዳልን ቦታ እራስዎ ያስተካክሉት።
myModal.handleUpdate()
ማስወገድ
የአንድ ንጥረ ነገር ሞዳልን ያጠፋል. (የተከማቸ ውሂብ በ DOM አባል ላይ ያስወግዳል)
myModal.dispose()
getInstance
ከDOM ኤለመንት ጋር የተገናኘውን ሞዳል ምሳሌ እንድታገኙ የሚያስችል የማይንቀሳቀስ ዘዴ
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
ከDOM ኤለመንት ጋር የተገናኘውን የሞዳል ምሳሌ እንድታገኟቸው ወይም ካልተጀመረ አዲስ ለመፍጠር የሚያስችል የማይንቀሳቀስ ዘዴ
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
ክስተቶች
የቡትስትራፕ ሞዳል ክፍል ወደ ሞዳል ተግባር ለመያያዝ ጥቂት ክስተቶችን ያጋልጣል። ሁሉም የሞዳል ሁነቶች የሚተኮሱት በራሱ ሞዳል ላይ ነው (ማለትም በ <div class="modal">
)።
የክስተት አይነት | መግለጫ |
---|---|
show.bs.modal |
show የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል . በአንድ ጠቅታ ከተከሰተ፣ ጠቅ የተደረገው አካል እንደ relatedTarget የዝግጅቱ ንብረት ይገኛል። |
shown.bs.modal |
ይህ ክስተት ሞጁሉ ለተጠቃሚው እንዲታይ ከተደረገ (የ CSS ሽግግሮች እስኪጠናቀቅ ድረስ ይጠብቃል) ይባረራል። በአንድ ጠቅታ ከተከሰተ፣ ጠቅ የተደረገው አካል እንደ relatedTarget የዝግጅቱ ንብረት ይገኛል። |
hide.bs.modal |
hide የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል . |
hidden.bs.modal |
ሞዱሉ ከተጠቃሚው ተደብቆ ሲጠናቀቅ ይህ ክስተት የሚነድ ነው (የCSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)። |
hidePrevented.bs.modal |
ይህ ክስተት የሚቀጣጠለው ሞዳል በሚታይበት ጊዜ፣ ጀርባው ሲሆን static እና ከሞዳል ውጭ ጠቅ ማድረግ ወይም የማምለጫ ቁልፍ መጫን በቁልፍ ሰሌዳው ምርጫ ወይም data-bs-keyboard ወደ ላይ ሲቀናበር ነው false ። |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})