మోడల్
లైట్బాక్స్లు, వినియోగదారు నోటిఫికేషన్లు లేదా పూర్తిగా అనుకూల కంటెంట్ కోసం మీ సైట్కు డైలాగ్లను జోడించడానికి బూట్స్ట్రాప్ యొక్క జావాస్క్రిప్ట్ మోడల్ ప్లగ్ఇన్ని ఉపయోగించండి.
అది ఎలా పని చేస్తుంది
బూట్స్ట్రాప్ మోడల్ కాంపోనెంట్తో ప్రారంభించడానికి ముందు, మా మెను ఎంపికలు ఇటీవల మారినందున కింది వాటిని తప్పకుండా చదవండి.
- మోడల్స్ HTML, CSS మరియు JavaScriptతో నిర్మించబడ్డాయి. వారు డాక్యుమెంట్లోని మిగతా వాటిపై ఉంచారు మరియు
<body>
మోడల్ కంటెంట్ స్క్రోల్ చేయడానికి బదులుగా స్క్రోల్ను తీసివేయండి. - మోడల్ "బ్యాక్డ్రాప్"పై క్లిక్ చేయడం వలన మోడల్ స్వయంచాలకంగా మూసివేయబడుతుంది.
- బూట్స్ట్రాప్ ఒక సమయంలో ఒక మోడల్ విండోకు మాత్రమే మద్దతు ఇస్తుంది. నెస్టెడ్ మోడల్లు పేలవమైన వినియోగదారు అనుభవాలు అని మేము విశ్వసిస్తున్నందున వాటికి మద్దతు లేదు.
- మోడల్స్ ఉపయోగిస్తాయి
position: fixed
, ఇది కొన్నిసార్లు దాని రెండరింగ్ గురించి కొంచెం ప్రత్యేకంగా ఉంటుంది. సాధ్యమైనప్పుడల్లా, ఇతర మూలకాల నుండి సంభావ్య జోక్యాన్ని నివారించడానికి మీ మోడల్ HTMLని ఉన్నత-స్థాయి స్థానంలో ఉంచండి..modal
మరొక స్థిర మూలకంలో గూడు కట్టినప్పుడు మీరు సమస్యలను ఎదుర్కొనే అవకాశం ఉంది. - మరోసారి, కారణంగా
position: fixed
, మొబైల్ పరికరాల్లో మోడల్లను ఉపయోగించడంలో కొన్ని జాగ్రత్తలు ఉన్నాయి. వివరాల కోసం మా బ్రౌజర్ సపోర్ట్ డాక్స్ చూడండి. - HTML5 దాని సెమాంటిక్స్ను ఎలా నిర్వచిస్తుంది అనే కారణంగా, HTML
autofocus
లక్షణం బూట్స్ట్రాప్ మోడల్లలో ఎటువంటి ప్రభావాన్ని చూపదు. అదే ప్రభావాన్ని సాధించడానికి, కొన్ని అనుకూల జావాస్క్రిప్ట్ని ఉపయోగించండి:
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>
స్టాటిక్ బ్యాక్డ్రాప్
బ్యాక్డ్రాప్ స్టాటిక్కి సెట్ చేయబడినప్పుడు, మోడల్ వెలుపల క్లిక్ చేసినప్పుడు మూసివేయబడదు. దీన్ని ప్రయత్నించడానికి దిగువ బటన్ను క్లిక్ చేయండి.
<!-- 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>
గ్రిడ్ ఉపయోగించి
బూట్స్ట్రాప్ గ్రిడ్ సిస్టమ్ను మోడల్లో గూడు కట్టడం ద్వారా .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
మరియు HTML data-bs-*
లక్షణాలను ఉపయోగించండి .
క్రింద లైవ్ డెమో ఉంది, దాని తర్వాత ఉదాహరణ HTML మరియు జావాస్క్రిప్ట్. మరింత సమాచారం కోసం, వివరాల కోసం మోడల్ ఈవెంట్స్ డాక్స్ చదవండి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">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">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"
మేము ఇప్పటికే జావాస్క్రిప్ట్ ద్వారా జోడించినందున మీరు జోడించాల్సిన అవసరం లేదని గుర్తుంచుకోండి.
YouTube వీడియోలను పొందుపరచడం
మోడల్స్లో YouTube వీడియోలను పొందుపరచడానికి ప్లేబ్యాక్ మరియు మరిన్నింటిని స్వయంచాలకంగా ఆపడానికి బూట్స్ట్రాప్లో కాకుండా అదనపు జావాస్క్రిప్ట్ అవసరం. మరింత సమాచారం కోసం ఈ సహాయకరమైన స్టాక్ ఓవర్ఫ్లో పోస్ట్ను చూడండి .
ఐచ్ఛిక పరిమాణాలు
మోడల్లు మూడు ఐచ్ఛిక పరిమాణాలను కలిగి ఉంటాయి, వీటిని ఒకపై ఉంచడానికి మాడిఫైయర్ తరగతుల ద్వారా అందుబాటులో ఉంటాయి .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-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
మ్యాప్ మరియు లూప్ ద్వారా రూపొందించబడతాయి 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
మోడల్ వెలుపల క్లిక్ చేసినప్పుడు చూపిన మోడల్లను తీసివేయడానికి ఒక క్లిక్ ప్రాంతాన్ని అందించడానికి aని ఉత్పత్తి చేస్తుంది.
డేటా లక్షణాల ద్వారా
టోగుల్ చేయండి
జావాస్క్రిప్ట్ రాయకుండా మోడల్ని యాక్టివేట్ చేయండి. టోగుల్ చేయడానికి ఒక నిర్దిష్ట మోడల్తో పాటుగా లేదా data-bs-toggle="modal"
ఒక బటన్ వంటి నియంత్రిక మూలకంపై సెట్ చేయండి .data-bs-target="#foo"
href="#foo"
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
రద్దుచేసే
దిగువ ప్రదర్శించిన విధంగా మోడల్లోనిdata
బటన్పై ఉన్న లక్షణంతో తొలగింపును సాధించవచ్చు :
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
లేదా మోడల్ వెలుపల ఉన్న బటన్పై క్రింద data-bs-target
ప్రదర్శించిన విధంగా:
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
జావాస్క్రిప్ట్ ద్వారా
JavaScript యొక్క ఒకే లైన్తో మోడల్ను సృష్టించండి:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
ఎంపికలు
ఎంపికలు డేటా లక్షణాలు లేదా జావాస్క్రిప్ట్ ద్వారా పంపబడతాయి. డేటా అట్రిబ్యూట్ల కోసం, ఎంపిక పేరును data-bs-
, లో వలె జత చేయండి data-bs-backdrop=""
.
పేరు | టైప్ చేయండి | డిఫాల్ట్ | వివరణ |
---|---|---|---|
backdrop |
బూలియన్ లేదా స్ట్రింగ్'static' |
true |
మోడల్-బ్యాక్డ్రాప్ ఎలిమెంట్ను కలిగి ఉంటుంది. ప్రత్యామ్నాయంగా, static క్లిక్లో మోడల్ను మూసివేయని బ్యాక్డ్రాప్ కోసం పేర్కొనండి. |
keyboard |
బూలియన్ | true |
ఎస్కేప్ కీ నొక్కినప్పుడు మోడల్ను మూసివేస్తుంది |
focus |
బూలియన్ | true |
ప్రారంభించినప్పుడు మోడల్పై దృష్టి పెడుతుంది. |
పద్ధతులు
అసమకాలిక పద్ధతులు మరియు పరివర్తనాలు
అన్ని API పద్ధతులు అసమకాలికమైనవి మరియు పరివర్తనను ప్రారంభిస్తాయి . వారు పరివర్తన ప్రారంభమైన వెంటనే కానీ అది ముగిసేలోపు కాలర్ వద్దకు తిరిగి వస్తారు . అదనంగా, పరివర్తన భాగంపై పద్ధతి కాల్ విస్మరించబడుతుంది .
మరింత సమాచారం కోసం మా జావాస్క్రిప్ట్ డాక్యుమెంటేషన్ చూడండి .
ఉత్తీర్ణత ఎంపికలు
మీ కంటెంట్ని మోడల్గా యాక్టివేట్ చేస్తుంది. ఐచ్ఛిక ఎంపికలను అంగీకరిస్తుంది 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...
})