முக்கிய உள்ளடக்கத்திற்கு செல்க டாக்ஸ் வழிசெலுத்தலுக்குச் செல்லவும்
Check
in English

மாதிரி

லைட்பாக்ஸ்கள், பயனர் அறிவிப்புகள் அல்லது முற்றிலும் தனிப்பயன் உள்ளடக்கத்திற்கான உரையாடல்களை உங்கள் தளத்தில் சேர்க்க பூட்ஸ்டார்ப்பின் ஜாவாஸ்கிரிப்ட் மாதிரி செருகுநிரலைப் பயன்படுத்தவும்.

இந்தப் பக்கத்தில்

எப்படி இது செயல்படுகிறது

பூட்ஸ்டார்ப்பின் மாதிரி கூறுகளுடன் தொடங்குவதற்கு முன், எங்கள் மெனு விருப்பங்கள் சமீபத்தில் மாறிவிட்டதால், பின்வருவனவற்றைப் படிக்க மறக்காதீர்கள்.

  • மாதிரிகள் HTML, CSS மற்றும் JavaScript உடன் கட்டமைக்கப்பட்டுள்ளன. அவை ஆவணத்தில் உள்ள எல்லாவற்றிலும் நிலைநிறுத்தப்பட்டு, ஸ்க்ரோலில் இருந்து ஸ்க்ரோலை அகற்றி, <body>அதற்குப் பதிலாக மாதிரி உள்ளடக்கம் உருட்டும்.
  • மாதிரி "பின்னணியில்" கிளிக் செய்தால், தானாக மாதிரி மூடப்படும்.
  • பூட்ஸ்ட்ராப் ஒரு நேரத்தில் ஒரு மாதிரி சாளரத்தை மட்டுமே ஆதரிக்கிறது. உள்ளமைக்கப்பட்ட மாதிரிகள் ஆதரிக்கப்படாது, ஏனெனில் அவை மோசமான பயனர் அனுபவங்கள் என்று நாங்கள் நம்புகிறோம்.
  • மாதிரிகள் பயன்படுத்துகின்றன position: fixed, இது சில நேரங்களில் அதன் ரெண்டரிங் பற்றி சற்று குறிப்பிட்டதாக இருக்கலாம். முடிந்த போதெல்லாம், மற்ற உறுப்புகளிலிருந்து சாத்தியமான குறுக்கீடுகளைத் தவிர்க்க, உங்கள் மாதிரி HTML ஐ உயர்நிலை நிலையில் வைக்கவும். .modalமற்றொரு நிலையான உறுப்புக்குள் கூடு கட்டும்போது நீங்கள் சிக்கல்களைச் சந்திக்க நேரிடும் .
  • மீண்டும், காரணமாக, position: fixedமொபைல் சாதனங்களில் மாடல்களைப் பயன்படுத்துவதில் சில எச்சரிக்கைகள் உள்ளன. விவரங்களுக்கு எங்கள் உலாவி ஆதரவு ஆவணத்தைப் பார்க்கவும்.
  • HTML5 அதன் சொற்பொருளை எவ்வாறு வரையறுக்கிறது என்பதன் காரணமாக , autofocusHTML பண்புக்கூறு பூட்ஸ்டார்ப் மாதிரிகளில் எந்த விளைவையும் ஏற்படுத்தாது. அதே விளைவை அடைய, சில தனிப்பயன் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தவும்:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  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" data-bs-toggle="popover" 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="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" 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.relatedTargetHTML பண்புக்கூறுகளைப் data-bs-*பயன்படுத்தவும் .

கீழே ஒரு நேரடி டெமோ உள்ளது, அதைத் தொடர்ந்து HTML மற்றும் ஜாவாஸ்கிரிப்ட். மேலும் தகவலுக்கு, விவரங்களுக்கு மாதிரி நிகழ்வுகளின் ஆவணத்தைப் படிக்கவும்relatedTarget .

html 
<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>
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const 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.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = `New message to ${recipient}`
  modalBodyInput.value = recipient
})

மாதிரிகளுக்கு இடையில் மாறவும்

சில புத்திசாலித்தனமான data-bs-targetமற்றும் data-bs-toggleபண்புக்கூறுகளுடன் பல மாதிரிகளுக்கு இடையில் மாறவும். எடுத்துக்காட்டாக, ஏற்கனவே திறந்திருக்கும் உள்நுழைவு மாதிரியிலிருந்து கடவுச்சொல் மீட்டமைப்பு மாதிரியை மாற்றலாம். பல மாதிரிகளை ஒரே நேரத்தில் திறக்க முடியாது என்பதை நினைவில் கொள்ளவும் - இந்த முறை இரண்டு தனித்தனி மாடல்களுக்கு இடையில் மாறுகிறது.

முதல் மாதிரியைத் திறக்கவும்
html 
<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. கூடுதலாக, உங்கள் மாதிரி உரையாடலின் விளக்கத்தை on உடன் aria-describedbyகொடுக்கலாம் .modal. role="dialog"ஜாவாஸ்கிரிப்ட் வழியாக நாங்கள் ஏற்கனவே சேர்த்திருப்பதால் நீங்கள் சேர்க்க வேண்டியதில்லை என்பதை நினைவில் கொள்ளவும் .

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>

CSS

மாறிகள்

v5.2.0 இல் சேர்க்கப்பட்டது

பூட்ஸ்டார்ப்பின் வளர்ச்சியடைந்து வரும் CSS மாறிகள் அணுகுமுறையின் ஒரு பகுதியாக, மேம்படுத்தப்பட்ட நிகழ்நேர தனிப்பயனாக்கத்திற்காகவும் இப்போது உள்ளூர் CSS மாறிகளை மாதிரிகள் .modalபயன்படுத்துகின்றன .modal-backdrop. CSS மாறிகளுக்கான மதிப்புகள் Sass வழியாக அமைக்கப்படுகின்றன, எனவே Sass தனிப்பயனாக்கம் இன்னும் ஆதரிக்கப்படுகிறது.

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
  
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

சாஸ் மாறிகள்

$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:        var(--#{$prefix}border-color-translucent);
$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:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-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-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$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,
      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
    }
  }
}

பயன்பாடு

மாதிரி சொருகி, தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் உங்கள் மறைக்கப்பட்ட உள்ளடக்கத்தை தேவைக்கேற்ப மாற்றுகிறது. இது இயல்புநிலை ஸ்க்ரோலிங் நடத்தையை மேலெழுதுகிறது மற்றும் .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>

நிராகரி

கீழே காட்டப்பட்டுள்ள மாதிரியில் உள்ள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>
ஒரு மாதிரியை நிராகரிப்பதற்கான இரண்டு வழிகளும் ஆதரிக்கப்பட்டாலும், ஒரு மாதிரியை வெளியில் இருந்து நிராகரிப்பது ARIA ஆதரிங் நடைமுறைகள் வழிகாட்டி உரையாடல் (மாதிரி) வடிவத்துடன் பொருந்தவில்லை என்பதை நினைவில் கொள்ளவும் . இதை உங்கள் சொந்த ஆபத்தில் செய்யுங்கள்.

ஜாவாஸ்கிரிப்ட் வழியாக

ஜாவாஸ்கிரிப்ட்டின் ஒற்றை வரியுடன் மாதிரியை உருவாக்கவும்:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் வழியாக விருப்பங்களை அனுப்ப முடியும் என்பதால், இல் உள்ளதைப் போல விருப்பப் பெயரை நீங்கள் data-bs-சேர்க்கலாம் data-bs-animation="{value}". தரவு பண்புக்கூறுகள் வழியாக விருப்பங்களை அனுப்பும் போது, ​​" camelCase " என்பதிலிருந்து " kebab-case " என்ற விருப்பப் பெயரின் கேஸ் வகையை மாற்றுவதை உறுதிசெய்யவும் . எடுத்துக்காட்டாக, க்கு data-bs-custom-class="beautifier"பதிலாக பயன்படுத்தவும் data-bs-customClass="beautifier".

பூட்ஸ்டார்ப் 5.2.0 இன் படி, அனைத்து கூறுகளும் ஒரு சோதனை முன்பதிவு செய்யப்பட்ட தரவு பண்புக்கூறை ஆதரிக்கின்றன data-bs-config, இது JSON சரமாக எளிய கூறு உள்ளமைவைக் கொண்டிருக்கும். ஒரு உறுப்பு data-bs-config='{"delay":0, "title":123}'மற்றும் data-bs-title="456"பண்புக்கூறுகள் இருக்கும்போது, ​​​​இறுதி titleமதிப்பு இருக்கும் 456மற்றும் தனி தரவு பண்புக்கூறுகள் இல் கொடுக்கப்பட்ட மதிப்புகளை மீறும் data-bs-config. கூடுதலாக, தற்போதுள்ள தரவு பண்புக்கூறுகள் போன்ற JSON மதிப்புகளை வைக்க முடியும் data-bs-delay='{"show":0,"hide":150}'.

பெயர் வகை இயல்புநிலை விளக்கம்
backdrop பூலியன்,'static' true மாதிரி-பின்னணி உறுப்பை உள்ளடக்கியது. மாற்றாக, staticகிளிக் செய்யும் போது மாதிரியை மூடாத பின்னணியைக் குறிப்பிடவும்.
focus பூலியன் true துவக்கும்போது மாதிரியில் கவனம் செலுத்துகிறது.
keyboard பூலியன் true தப்பிக்கும் விசையை அழுத்தும் போது மாதிரியை மூடுகிறது.

முறைகள்

ஒத்திசைவற்ற முறைகள் மற்றும் மாற்றங்கள்

அனைத்து API முறைகளும் ஒத்திசைவற்றவை மற்றும் மாற்றத்தைத் தொடங்குகின்றன . மாற்றம் தொடங்கப்பட்டவுடன், ஆனால் அது முடிவதற்குள் அவர்கள் அழைப்பாளரிடம் திரும்புகிறார்கள் . கூடுதலாக, மாற்றும் கூறுகளின் முறை அழைப்பு புறக்கணிக்கப்படும் .

மேலும் தகவலுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணங்களைப் பார்க்கவும் .

கடந்து செல்லும் விருப்பங்கள்

உங்கள் உள்ளடக்கத்தை ஒரு மாதிரியாக செயல்படுத்துகிறது. விருப்ப விருப்பங்களை ஏற்றுக்கொள்கிறது object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
முறை விளக்கம்
dispose ஒரு தனிமத்தின் மாதிரியை அழிக்கிறது. (DOM உறுப்பில் சேமிக்கப்பட்ட தரவை நீக்குகிறது)
getInstance DOM உறுப்புடன் தொடர்புடைய மாதிரி நிகழ்வைப் பெற உங்களை அனுமதிக்கும் நிலையான முறை.
getOrCreateInstance DOM உறுப்புடன் தொடர்புடைய மாதிரி நிகழ்வைப் பெற உங்களை அனுமதிக்கும் நிலையான முறை, அல்லது அது துவக்கப்படாமல் இருந்தால் புதிய ஒன்றை உருவாக்கவும்.
handleUpdate ஒரு மாதிரி திறந்திருக்கும் போது அதன் உயரம் மாறினால் (அதாவது ஒரு ஸ்க்ரோல்பார் தோன்றினால்) மாடலின் நிலையை கைமுறையாக மறுசீரமைக்கவும்.
hide ஒரு மாதிரியை கைமுறையாக மறைக்கிறது. மாடல் உண்மையில் மறைக்கப்படுவதற்கு முன்பு அழைப்பாளரிடம் திரும்பும் (அதாவது hidden.bs.modalநிகழ்வு நிகழும் முன்).
show ஒரு மாதிரியை கைமுறையாக திறக்கிறது. மாடல் உண்மையில் காட்டப்படுவதற்கு முன்பு (அதாவது shown.bs.modalநிகழ்வு நிகழும் முன்) அழைப்பாளருக்குத் திரும்புகிறது. relatedTargetமேலும், மாதிரி நிகழ்வுகளில் ( சொத்துகளாக) பெறக்கூடிய ஒரு DOM உறுப்பை நீங்கள் ஒரு வாதமாக அனுப்பலாம் . (அதாவது const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle ஒரு மாதிரியை கைமுறையாக மாற்றுகிறது. மாடல் உண்மையில் காட்டப்படுவதற்கு அல்லது மறைக்கப்படுவதற்கு முன் அழைப்பாளருக்குத் திரும்பும் (அதாவது நிகழ்வு shown.bs.modalஅல்லது hidden.bs.modalநிகழ்வு நிகழும் முன்).

நிகழ்வுகள்

பூட்ஸ்டார்ப்பின் மாடல் கிளாஸ், மாடல் செயல்பாட்டில் இணைக்கும் சில நிகழ்வுகளை வெளிப்படுத்துகிறது. அனைத்து மாதிரி நிகழ்வுகளும் மாதிரியிலேயே சுடப்படுகின்றன (அதாவது இல் <div class="modal">).

நிகழ்வு விளக்கம்
hide.bs.modal hideநிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும் .
hidden.bs.modal மாடல் பயனரிடமிருந்து மறைக்கப்பட்டதை முடித்தவுடன் இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
hidePrevented.bs.modal மாதிரி காட்டப்படும் போது இந்த நிகழ்வு நீக்கப்பட்டது, அதன் பின்னணி staticமற்றும் மாதிரிக்கு வெளியே ஒரு கிளிக் செய்யப்படுகிறது. keyboardஎஸ்கேப் விசையை அழுத்தி விருப்பத்தை அமைக்கும்போது நிகழ்வும் சுடப்படும் false.
show.bs.modal showநிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது . ஒரு கிளிக் காரணமாக ஏற்பட்டால், கிளிக் செய்யப்பட்ட உறுப்பு relatedTargetநிகழ்வின் சொத்தாகக் கிடைக்கும்.
shown.bs.modal மாடல் பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்). ஒரு கிளிக் காரணமாக ஏற்பட்டால், கிளிக் செய்யப்பட்ட உறுப்பு relatedTargetநிகழ்வின் சொத்தாகக் கிடைக்கும். 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})