बूटस्ट्रैप जेएस मोडल
मोडल सीएसएस क्लासेस
मॉडल्स के बारे में एक ट्यूटोरियल के लिए, हमारा बूटस्ट्रैप मोडल ट्यूटोरियल पढ़ें ।
| Class | Description | Example |
|---|---|---|
.modal |
Creates a modal | |
.modal-content |
Styles the modal properly with border, background-color, etc. Use this class to add the modal's header, body, and footer | |
.modal-dialog-centered |
Centers the modal vertically and horizontally within the page | |
.modal-dialog-scrollable |
Adds a scrollbar inside the modal | |
.modal-header |
Defines the style for the header of the modal | |
.modal-body |
Defines the style for the body of the modal | |
.modal-footer |
Defines the style for the footer in the modal. Note: This area is right-aligned by default. To change this, add the justify-content-start or justify-content-center together with the .modal-footer class | |
.modal-sm |
Specifies a small modal | |
.modal-lg |
Specifies a large modal | |
.fade |
Adds an animation/transition effect which fades the modal in and out |
डेटा के माध्यम से मोडल को ट्रिगर करें-* विशेषताएँ
जोड़ें data-toggle="modal"और data-target="#modalID"किसी भी तत्व के लिए।
नोट:<a> तत्वों के लिए , छोड़ दें data-targetऔर
href="#modalID"इसके बजाय उपयोग करें:
उदाहरण
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>
जावास्क्रिप्ट के माध्यम से ट्रिगर
इसके साथ मैन्युअल रूप से सक्षम करें:
उदाहरण
$("#myModal").modal()
मोडल विकल्प
विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को डेटा में जोड़ें- जैसा कि डेटा-बैकड्रॉप = "" में है।
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true |
Specifies whether the modal should have a dark overlay:
If you specify the value "static", it is not possible to close the modal when clicking outside of it |
|
| keyboard | boolean | true | Specifies whether the modal can be closed with the escape key (Esc):
|
|
| show | boolean | true | Specifies whether to show the modal when initialized |
मोडल तरीके
निम्न तालिका सभी उपलब्ध मोडल विधियों को सूचीबद्ध करती है।
| Method | Description | Try it |
|---|---|---|
| .modal(options) | Activates the content as a modal. See options above for valid values | |
| .modal("toggle") | Toggles the modal | |
| .modal("show") | Opens the modal | |
| .modal("hide") | Hides the modal |
मोडल इवेंट्स
निम्न तालिका सभी उपलब्ध मोडल घटनाओं को सूचीबद्ध करती है।
| Event | Description | Try it |
|---|---|---|
| show.bs.modal | Occurs when the modal is about to be shown | |
| shown.bs.modal | Occurs when the modal is fully shown (after CSS transitions have completed) | |
| hide.bs.modal | Occurs when the modal is about to be hidden | |
| hidden.bs.modal | Occurs when the modal is fully hidden (after CSS transitions have completed) |