బూస్ట్రాప్ 5 మోడల్

మోడల్

Modal కామ్పోనెంట్ ఒక డైలాగ్ / పప్ అప్ అని, ప్రస్తుత పేజీ పైభాగంలో ప్రదర్శించబడుతుంది:

如何创建模态

ప్రాథమిక మోడల్ను సృష్టించడానికి ఎలా చేయాలనే ఉదాహరణను చూడండి:

ఉదాహరణ

<!-- మోడల్ తెరిచడానికి బటన్ -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  మోడల్ తెరిచండి
</button>
<!-- మోడల్ -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- మోడల్ శీర్షిక -->
      <div class="modal-header">
        <h4 class="modal-title">మోడల్ శీర్షిక</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- మోడల్ ప్రధాన భాగం -->
      <div class="modal-body">
        మోడల్ ప్రధాన భాగం ..
      </div>
      <!-- మోడల్ పాదం -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">మూసివేయండి</button>
      </div>
    </div>
  </div>
</div>

స్వయంగా ప్రయత్నించండి

అనిమేషన్ జోడించండి

దయచేసి అనిమేషన్ జోడించడానికి ఉపయోగించండి .fade మోడల్ని తెరిచినప్పుడు మరియు మూసినప్పుడు ముక్తికరణ అనిమేషన్ జోడించడానికి క్లాస్ జోడించండి:

ఉదాహరణ

<!-- మోడల్ ముక్తికరణ అనిమేషన్ -->
<div class="modal fade"></div>
<!-- మోడల్ లేదా అనిమేషన్ లేని మోడల్ -->
<div class="modal"></div>

స్వయంగా ప్రయత్నించండి

మోడల్ పరిమాణం

చిన్న మోడల్కు జోడించడం ద్వారా .modal-sm క్లాస్ (గరిష్ట వెడల్పు 300px) లేదా పెద్ద మోడల్కు జోడించండి .modal-lg క్లాస్ (గరిష్ట వెడల్పు 800px) లేదా అతిపెద్ద మోడల్కు జోడించండి .modal-xl

దయచేసి ఈ మోడల్ పరిమాణాన్ని మార్చండి (గరిష్ట వెడల్పు 1140 పిక్సెల్స్). అప్రమేయంగా గరిష్ట వెడల్పు 500 పిక్సెల్స్ ఉంటుంది。 .modal-dialog క్లాస్ మరియు పరిమాణ క్లాస్ ప్రతిసాధనంగా జోడించండి <div> అంశం:

చిన్న మోడల్

<div class="modal-dialog modal-sm">

స్వయంగా ప్రయత్నించండి

పెద్ద మోడల్

<div class="modal-dialog modal-lg">

స్వయంగా ప్రయత్నించండి

ఎక్స్ట్రా లార్జ్ మోడల్

<div class="modal-dialog modal-xl">

స్వయంగా ప్రయత్నించండి

అప్రమేయంగా, మోడల్ యొక్క పరిమాణం "మీడియం" (500px గరిష్ట వెడల్పు).

ఫూల్‌స్క్రీన్ మోడల్

మీరు మోడల్ ని పూర్తి పేజీ వెడల్పు మరియు ప్రాన్సిప్యు లో ప్రదర్శించాలి అని కోరుకున్నట్లయితే, ఈ క్లాస్ ఉపయోగించండి: .modal-fullscreen క్లాస్:

ఉదాహరణ

<div class="modal-dialog modal-fullscreen">

స్వయంగా ప్రయత్నించండి

రెస్పాన్సివ్ ఫూల్‌స్క్రీన్ మోడల్

మీరు కూడా ఉపయోగించవచ్చు .modal-fullscreen-*-* క్లాస్ ద్వారా మోడల్ యొక్క పూర్తి స్క్రీన్ ప్రదర్శన సమయాన్ని నియంత్రిస్తుంది:

క్లాస్ వివరణ ఉదాహరణ
రెస్పాన్సివ్ ఫూల్‌స్క్రీన్ మోడల్ మీరు కూడా ఉపయోగించవచ్చు స్వయంగా ప్రయత్నించండి
.modal-fullscreen-*-* క్లాస్, మోడల్ యొక్క పూర్తి స్క్రీన్ ప్రదర్శనకు ఉపయోగించబడుతుంది: స్వయంగా ప్రయత్నించండి
576px కింద పూర్తి స్క్రీన్ 768px కింద పూర్తి స్క్రీన్ స్వయంగా ప్రయత్నించండి
992px కింద పూర్తి స్క్రీన్ 1200px కింద పూర్తి స్క్రీన్ స్వయంగా ప్రయత్నించండి
.modal-fullscreen-xxl-down 1400px కింద పూర్తి స్క్రీన్ స్వయంగా ప్రయత్నించండి

మధ్యస్థ మోడల్

ఉపయోగించడం ద్వారా .modal-dialog-centric క్లాస్, పేజీలో వర్గాలు మరియు అడుగులు మధ్యకే మోడల్ ని మధ్యస్థం చేస్తుంది:

ఉదాహరణ

<div class="modal-dialog modal-dialog-centered">

స్వయంగా ప్రయత్నించండి

స్క్రోల్ మోడల్

మోడల్ లో చాలా కంటెంట్ ఉన్నప్పుడు, పేజీకి ఒక స్క్రోల్ బార్ జోడిస్తుంది. క్రింది ఉదాహరణను చూడండి మరియు అర్థం చేసుకోండి:

ఉదాహరణ

<div class="modal-dialog">

స్వయంగా ప్రయత్నించండి

కానీ, ఈ విధంగా చేయడం ద్వారా: .modal-dialog-scrollable కి జత .modal-dialog మోడల్ లోపల మాత్రమే స్క్రోల్ అవుతుంది, పేజీ యొక్క స్వయంగా స్క్రోల్ అవుతుంది కాదు:

ఉదాహరణ

<div class="modal-dialog modal-dialog-scrollable">

స్వయంగా ప్రయత్నించండి