ಲೈಟ್ಬಾಕ್ಸ್ಗಳು, ಬಳಕೆದಾರರ ಅಧಿಸೂಚನೆಗಳು ಅಥವಾ ಸಂಪೂರ್ಣವಾಗಿ ಕಸ್ಟಮ್ ವಿಷಯಕ್ಕಾಗಿ ನಿಮ್ಮ ಸೈಟ್ಗೆ ಸಂವಾದಗಳನ್ನು ಸೇರಿಸಲು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾದರಿ ಪ್ಲಗಿನ್ ಬಳಸಿ.
ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಮಾದರಿ ಘಟಕದೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು, ನಮ್ಮ ಮೆನು ಆಯ್ಕೆಗಳು ಇತ್ತೀಚೆಗೆ ಬದಲಾಗಿರುವುದರಿಂದ ಕೆಳಗಿನದನ್ನು ಓದಲು ಮರೆಯದಿರಿ.
ಮಾದರಿಗಳನ್ನು HTML, CSS ಮತ್ತು JavaScript ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ. ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿರುವ ಎಲ್ಲದರ ಮೇಲೆ ಅವು ಸ್ಥಾನ ಪಡೆದಿವೆ ಮತ್ತು <body>ಮಾದರಿ ವಿಷಯ ಸ್ಕ್ರಾಲ್ ಆಗುವಂತೆ ಸ್ಕ್ರಾಲ್ನಿಂದ ಸ್ಕ್ರಾಲ್ ಅನ್ನು ತೆಗೆದುಹಾಕಿ.
ಮೋಡಲ್ "ಬ್ಯಾಕ್ಡ್ರಾಪ್" ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವುದರಿಂದ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮೋಡಲ್ ಅನ್ನು ಮುಚ್ಚುತ್ತದೆ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಒಂದು ಸಮಯದಲ್ಲಿ ಒಂದು ಮಾದರಿ ವಿಂಡೋವನ್ನು ಮಾತ್ರ ಬೆಂಬಲಿಸುತ್ತದೆ. ನೆಸ್ಟೆಡ್ ಮಾಡಲ್ಗಳು ಕಳಪೆ ಬಳಕೆದಾರ ಅನುಭವಗಳೆಂದು ನಾವು ನಂಬಿರುವುದರಿಂದ ಅವುಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.
ಮೋಡಲ್ಗಳು ಬಳಸುತ್ತವೆ position: fixed, ಇದು ಕೆಲವೊಮ್ಮೆ ಅದರ ರೆಂಡರಿಂಗ್ ಬಗ್ಗೆ ಸ್ವಲ್ಪ ನಿರ್ದಿಷ್ಟವಾಗಿರುತ್ತದೆ. ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, ಇತರ ಅಂಶಗಳಿಂದ ಸಂಭಾವ್ಯ ಹಸ್ತಕ್ಷೇಪವನ್ನು ತಪ್ಪಿಸಲು ನಿಮ್ಮ ಮಾದರಿ HTML ಅನ್ನು ಉನ್ನತ ಮಟ್ಟದ ಸ್ಥಾನದಲ್ಲಿ ಇರಿಸಿ. .modalಮತ್ತೊಂದು ಸ್ಥಿರ ಅಂಶದೊಳಗೆ ಗೂಡುಕಟ್ಟಿದಾಗ ನೀವು ಸಮಸ್ಯೆಗಳಿಗೆ ಸಿಲುಕಬಹುದು .
ಮತ್ತೊಮ್ಮೆ, ಕಾರಣ position: fixed, ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ಮಾದರಿಗಳನ್ನು ಬಳಸುವುದರೊಂದಿಗೆ ಕೆಲವು ಎಚ್ಚರಿಕೆಗಳಿವೆ. ವಿವರಗಳಿಗಾಗಿ ನಮ್ಮ ಬ್ರೌಸರ್ ಬೆಂಬಲ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ.
HTML5 ಅದರ ಶಬ್ದಾರ್ಥವನ್ನು ಹೇಗೆ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ ಎಂಬ ಕಾರಣದಿಂದಾಗಿ , autofocusHTML ಗುಣಲಕ್ಷಣವು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಮಾದರಿಗಳಲ್ಲಿ ಯಾವುದೇ ಪರಿಣಾಮವನ್ನು ಬೀರುವುದಿಲ್ಲ. ಅದೇ ಪರಿಣಾಮವನ್ನು ಸಾಧಿಸಲು, ಕೆಲವು ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ:
ಡೆಮೊಗಳು ಮತ್ತು ಬಳಕೆಯ ಮಾರ್ಗಸೂಚಿಗಳಿಗಾಗಿ ಓದುವುದನ್ನು ಮುಂದುವರಿಸಿ.
ಉದಾಹರಣೆಗಳು
ಮಾದರಿ ಘಟಕಗಳು
ಕೆಳಗೆ ಒಂದು ಸ್ಥಿರ ಮಾದರಿ ಉದಾಹರಣೆಯಾಗಿದೆ (ಅದರ ಅರ್ಥ positionಮತ್ತು displayಅತಿಕ್ರಮಿಸಲಾಗಿದೆ). ಮಾಡಲ್ ಹೆಡರ್, ಮಾದರಿ ದೇಹ (ಅಗತ್ಯವಿದೆ padding) ಮತ್ತು ಮಾದರಿ ಅಡಿಟಿಪ್ಪಣಿ (ಐಚ್ಛಿಕ) ಸೇರಿವೆ. ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ ವಜಾಗೊಳಿಸುವ ಕ್ರಿಯೆಗಳೊಂದಿಗೆ ಮಾದರಿ ಹೆಡರ್ಗಳನ್ನು ಸೇರಿಸಲು ಅಥವಾ ಇನ್ನೊಂದು ಸ್ಪಷ್ಟವಾದ ವಜಾಗೊಳಿಸುವ ಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸುವಂತೆ ನಾವು ಕೇಳುತ್ತೇವೆ.
ಮಾದರಿ ಶೀರ್ಷಿಕೆ
ಮಾಡಲ್ ದೇಹದ ಪಠ್ಯವು ಇಲ್ಲಿ ಹೋಗುತ್ತದೆ.
ಲೈವ್ ಡೆಮೊ
ಕೆಳಗಿನ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ವರ್ಕಿಂಗ್ ಮಾಡಲ್ ಡೆಮೊವನ್ನು ಟಾಗಲ್ ಮಾಡಿ. ಇದು ಕೆಳಗೆ ಸ್ಲೈಡ್ ಆಗುತ್ತದೆ ಮತ್ತು ಪುಟದ ಮೇಲ್ಭಾಗದಿಂದ ಮಸುಕಾಗುತ್ತದೆ.
Modal title
Woohoo, you're reading this text in a modal!
ಸ್ಥಿರ ಹಿನ್ನೆಲೆ
ಬ್ಯಾಕ್ಡ್ರಾಪ್ ಅನ್ನು ಸ್ಥಿರವಾಗಿ ಹೊಂದಿಸಿದಾಗ, ಅದರ ಹೊರಗೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಮೋಡಲ್ ಮುಚ್ಚುವುದಿಲ್ಲ. ಇದನ್ನು ಪ್ರಯತ್ನಿಸಲು ಕೆಳಗಿನ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ.
Modal title
I will not close if you click outside me. Don't even try to press escape key.
ದೀರ್ಘ ವಿಷಯವನ್ನು ಸ್ಕ್ರೋಲ್ ಮಾಡಲಾಗುತ್ತಿದೆ
ಬಳಕೆದಾರರ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಅಥವಾ ಸಾಧನಕ್ಕೆ ಮಾದರಿಗಳು ತುಂಬಾ ಉದ್ದವಾದಾಗ, ಅವರು ಪುಟದಿಂದ ಸ್ವತಂತ್ರವಾಗಿ ಸ್ಕ್ರಾಲ್ ಮಾಡುತ್ತಾರೆ. ನಾವು ಏನನ್ನು ಅರ್ಥೈಸುತ್ತೇವೆ ಎಂಬುದನ್ನು ನೋಡಲು ಕೆಳಗಿನ ಡೆಮೊವನ್ನು ಪ್ರಯತ್ನಿಸಿ.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
.modal-dialog-scrollableಗೆ ಸೇರಿಸುವ ಮೂಲಕ ಮೋಡಲ್ ದೇಹವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡಲು ಅನುಮತಿಸುವ ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಮೋಡಲ್ ಅನ್ನು ಸಹ ನೀವು ರಚಿಸಬಹುದು .modal-dialog.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ
.modal-dialog-centeredಮೋಡಲ್ ಅನ್ನು .modal-dialogಲಂಬವಾಗಿ ಮಧ್ಯಕ್ಕೆ ಸೇರಿಸಿ .
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
ಟೂಲ್ಟಿಪ್ಸ್ ಮತ್ತು ಪಾಪೋವರ್ಸ್
ಟೂಲ್ಟಿಪ್ಗಳು ಮತ್ತು ಪಾಪೋವರ್ಗಳನ್ನು ಅಗತ್ಯವಿರುವಂತೆ ಮಾದರಿಗಳಲ್ಲಿ ಇರಿಸಬಹುದು. ಮೋಡಲ್ಗಳನ್ನು ಮುಚ್ಚಿದಾಗ, ಯಾವುದೇ ಟೂಲ್ಟಿಪ್ಗಳು ಮತ್ತು ಪಾಪೋವರ್ಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಮಾದರಿಯೊಳಗೆ ಗೂಡುಕಟ್ಟುವ .container-fluidಮೂಲಕ ಬಳಸಿಕೊಳ್ಳಿ .modal-body. ನಂತರ, ನೀವು ಬೇರೆಲ್ಲಿಯಾದರೂ ಸಾಮಾನ್ಯ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ತರಗತಿಗಳನ್ನು ಬಳಸಿ.
Grids in modals
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
.col-md-6 .ml-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
ಬದಲಾಗುತ್ತಿರುವ ಮಾದರಿ ವಿಷಯ
ಸ್ವಲ್ಪ ವಿಭಿನ್ನ ವಿಷಯಗಳೊಂದಿಗೆ ಒಂದೇ ಮಾದರಿಯನ್ನು ಪ್ರಚೋದಿಸುವ ಬಟನ್ಗಳ ಗುಂಪನ್ನು ಹೊಂದಿರುವಿರಾ? ಬಳಸಿ event.relatedTargetಮತ್ತು HTML data-*ಗುಣಲಕ್ಷಣಗಳನ್ನು (ಬಹುಶಃ jQuery ಮೂಲಕ ) ಯಾವ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಲಾಗಿದೆ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಮೋಡಲ್ನ ವಿಷಯಗಳನ್ನು ಬದಲಾಯಿಸಲು.
HTML ಮತ್ತು JavaScript ಅನ್ನು ಅನುಸರಿಸಿ ಲೈವ್ ಡೆಮೊ ಕೆಳಗೆ ಇದೆ. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ, ವಿವರಗಳಿಗಾಗಿ ಮಾದರಿ ಈವೆಂಟ್ಗಳ ಡಾಕ್ಸ್ ಅನ್ನು ಓದಿrelatedTarget .
New message
ಅನಿಮೇಷನ್ ಬದಲಾಯಿಸಿ
ವೇರಿಯೇಬಲ್ ಮಾಡಲ್ ಫೇಡ್-ಇನ್ ಅನಿಮೇಷನ್ನ ಮೊದಲು $modal-fade-transformರೂಪಾಂತರ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ, ವೇರಿಯಬಲ್ ಮೋಡಲ್ ಫೇಡ್-ಇನ್ ಅನಿಮೇಷನ್ನ ಕೊನೆಯಲ್ಲಿ ರೂಪಾಂತರವನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ ..modal-dialog$modal-show-transform.modal-dialog
ನೀವು ಉದಾಹರಣೆಗೆ ಜೂಮ್-ಇನ್ ಅನಿಮೇಷನ್ ಬಯಸಿದರೆ, ನೀವು ಹೊಂದಿಸಬಹುದು $modal-fade-transform: scale(.8).
ಅನಿಮೇಷನ್ ತೆಗೆದುಹಾಕಿ
ವೀಕ್ಷಿಸಲು ಮಸುಕಾಗುವ ಬದಲು ಸರಳವಾಗಿ ಗೋಚರಿಸುವ ಮಾದರಿಗಳಿಗಾಗಿ, .fadeನಿಮ್ಮ ಮೋಡಲ್ ಮಾರ್ಕ್ಅಪ್ನಿಂದ ವರ್ಗವನ್ನು ತೆಗೆದುಹಾಕಿ.
ಡೈನಾಮಿಕ್ ಎತ್ತರಗಳು
ಮೋಡಲ್ ತೆರೆದಿರುವಾಗ ಅದರ ಎತ್ತರವು ಬದಲಾದರೆ, $('#myModal').modal('handleUpdate')ಸ್ಕ್ರಾಲ್ಬಾರ್ ಕಾಣಿಸಿಕೊಂಡರೆ ಮೋಡಲ್ನ ಸ್ಥಾನವನ್ನು ಮರುಹೊಂದಿಸಲು ನೀವು ಕರೆ ಮಾಡಬೇಕು.
ಪ್ರವೇಶಿಸುವಿಕೆ
ಗೆ ಸೇರಿಸಲು ಮರೆಯದಿರಿ aria-labelledby="...", ಮಾದರಿ ಶೀರ್ಷಿಕೆಯನ್ನು ಉಲ್ಲೇಖಿಸಿ .modal. aria-describedbyಹೆಚ್ಚುವರಿಯಾಗಿ, ನಲ್ಲಿ ನಿಮ್ಮ ಮಾದರಿ ಸಂವಾದದ ವಿವರಣೆಯನ್ನು ನೀವು ನೀಡಬಹುದು .modal. role="dialog"ನಾವು ಇದನ್ನು ಈಗಾಗಲೇ JavaScript ಮೂಲಕ ಸೇರಿಸಿರುವುದರಿಂದ ನೀವು ಸೇರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ .
YouTube ವೀಡಿಯೊಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ
ಯೂಟ್ಯೂಬ್ ವೀಡಿಯೊಗಳನ್ನು ಮಾದರಿಗಳಲ್ಲಿ ಎಂಬೆಡ್ ಮಾಡಲು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪ್ಲೇಬ್ಯಾಕ್ ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ನಿಲ್ಲಿಸಲು ಹೆಚ್ಚುವರಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿದೆ. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಈ ಸಹಾಯಕವಾದ ಸ್ಟಾಕ್ ಓವರ್ಫ್ಲೋ ಪೋಸ್ಟ್ ಅನ್ನು ನೋಡಿ.
ಐಚ್ಛಿಕ ಗಾತ್ರಗಳು
ಮೋಡಲ್ಗಳು ಮೂರು ಐಚ್ಛಿಕ ಗಾತ್ರಗಳನ್ನು ಹೊಂದಿವೆ, ಎ ಮೇಲೆ ಇರಿಸಲು ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳ ಮೂಲಕ ಲಭ್ಯವಿದೆ .modal-dialog. ಕಿರಿದಾದ ವ್ಯೂಪೋರ್ಟ್ಗಳಲ್ಲಿ ಅಡ್ಡಲಾಗಿರುವ ಸ್ಕ್ರಾಲ್ಬಾರ್ಗಳನ್ನು ತಪ್ಪಿಸಲು ಈ ಗಾತ್ರಗಳು ಕೆಲವು ಬ್ರೇಕ್ಪಾಯಿಂಟ್ಗಳಲ್ಲಿ ಕಿಕ್ ಇನ್ ಆಗುತ್ತವೆ.
ಗಾತ್ರ
ವರ್ಗ
ಮಾದರಿ ಗರಿಷ್ಠ ಅಗಲ
ಚಿಕ್ಕದು
.modal-sm
300px
ಡೀಫಾಲ್ಟ್
ಯಾವುದೂ
500px
ದೊಡ್ಡದು
.modal-lg
800px
ಹೆಚ್ಚುವರಿ ದೊಡ್ಡದು
.modal-xl
1140px
ಮಾರ್ಪಡಿಸುವ ವರ್ಗವಿಲ್ಲದ ನಮ್ಮ ಡೀಫಾಲ್ಟ್ ಮಾದರಿಯು "ಮಧ್ಯಮ" ಗಾತ್ರದ ಮಾದರಿಯನ್ನು ರೂಪಿಸುತ್ತದೆ.
Extra large modal
...
Large modal
...
Small modal
...
ಬಳಕೆ
ಮೋಡಲ್ ಪ್ಲಗಿನ್ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ನಿಮ್ಮ ಗುಪ್ತ ವಿಷಯವನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಇದು ಡೀಫಾಲ್ಟ್ ಸ್ಕ್ರೋಲಿಂಗ್ ನಡವಳಿಕೆಯನ್ನು ಅತಿಕ್ರಮಿಸಲು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು .modal-openಮೋಡಲ್ನ ಹೊರಗೆ ಕ್ಲಿಕ್ ಮಾಡುವಾಗ ತೋರಿಸಿರುವ ಮಾದರಿಗಳನ್ನು ವಜಾಗೊಳಿಸಲು ಕ್ಲಿಕ್ ಪ್ರದೇಶವನ್ನು ಒದಗಿಸಲು a ಅನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ.<body>.modal-backdrop
ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ
JavaScript ಬರೆಯದೆಯೇ ಮಾದರಿಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ. data-toggle="modal"ಒಂದು ಬಟನ್ನಂತಹ ನಿಯಂತ್ರಕ ಅಂಶದ ಮೇಲೆ ಹೊಂದಿಸಿ data-target="#foo"ಅಥವಾ href="#foo"ಟಾಗಲ್ ಮಾಡಲು ನಿರ್ದಿಷ್ಟ ಮಾದರಿಯನ್ನು ಗುರಿಯಾಗಿಸಲು.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ
myModalಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನ ಒಂದೇ ಸಾಲಿನ ಐಡಿಯೊಂದಿಗೆ ಮಾದರಿಗೆ ಕರೆ ಮಾಡಿ :
ಆಯ್ಕೆಗಳು
ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-backdrop="".
ಹೆಸರು
ಮಾದರಿ
ಡೀಫಾಲ್ಟ್
ವಿವರಣೆ
ಹಿನ್ನೆಲೆ
ಬೂಲಿಯನ್ ಅಥವಾ ಸ್ಟ್ರಿಂಗ್'static'
ನಿಜ
ಮಾದರಿ-ಬ್ಯಾಕ್ಡ್ರಾಪ್ ಅಂಶವನ್ನು ಒಳಗೊಂಡಿದೆ. ಪರ್ಯಾಯವಾಗಿ, staticಕ್ಲಿಕ್ನಲ್ಲಿ ಮಾದರಿಯನ್ನು ಮುಚ್ಚದ ಹಿನ್ನೆಲೆಗಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿ.
ಕೀಬೋರ್ಡ್
ಬೂಲಿಯನ್
ನಿಜ
ಎಸ್ಕೇಪ್ ಕೀಲಿಯನ್ನು ಒತ್ತಿದಾಗ ಮೋಡಲ್ ಅನ್ನು ಮುಚ್ಚುತ್ತದೆ
ಗಮನ
ಬೂಲಿಯನ್
ನಿಜ
ಆರಂಭಿಸಿದಾಗ ಮಾದರಿಯ ಮೇಲೆ ಗಮನವನ್ನು ಇರಿಸುತ್ತದೆ.
ತೋರಿಸು
ಬೂಲಿಯನ್
ನಿಜ
ಪ್ರಾರಂಭಿಸಿದಾಗ ಮಾದರಿಯನ್ನು ತೋರಿಸುತ್ತದೆ.
ವಿಧಾನಗಳು
ಅಸಮಕಾಲಿಕ ವಿಧಾನಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳು
ಎಲ್ಲಾ API ವಿಧಾನಗಳು ಅಸಮಕಾಲಿಕವಾಗಿರುತ್ತವೆ ಮತ್ತು ಪರಿವರ್ತನೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತವೆ . ಪರಿವರ್ತನೆ ಪ್ರಾರಂಭವಾದ ತಕ್ಷಣ ಅವರು ಕರೆ ಮಾಡುವವರ ಬಳಿಗೆ ಹಿಂತಿರುಗುತ್ತಾರೆ ಆದರೆ ಅದು ಮುಗಿಯುವ ಮೊದಲು . ಹೆಚ್ಚುವರಿಯಾಗಿ, ಪರಿವರ್ತನೆಯ ಘಟಕದಲ್ಲಿನ ವಿಧಾನದ ಕರೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ .
ನಿಮ್ಮ ವಿಷಯವನ್ನು ಮಾದರಿಯಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಐಚ್ಛಿಕ ಆಯ್ಕೆಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ object.
.modal('toggle')
ಒಂದು ಮೋಡಲ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಮೋಡಲ್ ಅನ್ನು ವಾಸ್ತವವಾಗಿ ತೋರಿಸುವ ಅಥವಾ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಅಥವಾ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .shown.bs.modalhidden.bs.modal
.modal('show')
ಹಸ್ತಚಾಲಿತವಾಗಿ ಒಂದು ಮಾದರಿಯನ್ನು ತೆರೆಯುತ್ತದೆ. ಮೋಡಲ್ ಅನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವುದಕ್ಕಿಂತ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .shown.bs.modal
.modal('hide')
ಒಂದು ಮೋಡಲ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಮರೆಮಾಡುತ್ತದೆ. ಮೋಡಲ್ ಅನ್ನು ವಾಸ್ತವವಾಗಿ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .hidden.bs.modal
.modal('handleUpdate')
ಮೋಡಲ್ ತೆರೆದಿರುವಾಗ ಅದರ ಎತ್ತರವು ಬದಲಾದರೆ (ಅಂದರೆ ಸ್ಕ್ರೋಲ್ಬಾರ್ ಕಾಣಿಸಿಕೊಂಡರೆ) ಹಸ್ತಚಾಲಿತವಾಗಿ ಮೋಡಲ್ನ ಸ್ಥಾನವನ್ನು ಮರುಹೊಂದಿಸಿ.
.modal('dispose')
ಅಂಶದ ಮಾದರಿಯನ್ನು ನಾಶಪಡಿಸುತ್ತದೆ.
ಕಾರ್ಯಕ್ರಮಗಳು
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಮಾದರಿ ವರ್ಗವು ಮೋಡಲ್ ಕಾರ್ಯನಿರ್ವಹಣೆಗೆ ಕೊಂಡಿಯಾಗಿರುವುದಕ್ಕಾಗಿ ಕೆಲವು ಘಟನೆಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ಎಲ್ಲಾ ಮಾದರಿ ಘಟನೆಗಳನ್ನು ಮಾದರಿಯಲ್ಲಿಯೇ (ಅಂದರೆ ನಲ್ಲಿ <div class="modal">) ಹಾರಿಸಲಾಗುತ್ತದೆ.
ಈವೆಂಟ್ ಪ್ರಕಾರ
ವಿವರಣೆ
show.bs.modal
showನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ . ಒಂದು ಕ್ಲಿಕ್ನಿಂದ ಉಂಟಾಗಿದ್ದರೆ, ಕ್ಲಿಕ್ ಮಾಡಿದ ಅಂಶವು relatedTargetಈವೆಂಟ್ನ ಆಸ್ತಿಯಾಗಿ ಲಭ್ಯವಿದೆ.
ತೋರಿಸಲಾಗಿದೆ.ಬಿಎಸ್.ಮೋಡಲ್
ಮೋಡಲ್ ಅನ್ನು ಬಳಕೆದಾರರಿಗೆ ಗೋಚರಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ). ಒಂದು ಕ್ಲಿಕ್ನಿಂದ ಉಂಟಾಗಿದ್ದರೆ, ಕ್ಲಿಕ್ ಮಾಡಿದ ಅಂಶವು relatedTargetಈವೆಂಟ್ನ ಆಸ್ತಿಯಾಗಿ ಲಭ್ಯವಿದೆ.
hide.bs.modal
hideನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆ ಮಾಡಿದಾಗ ಈ ಘಟನೆಯನ್ನು ತಕ್ಷಣವೇ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ .
ಮರೆಮಾಡಲಾಗಿದೆ.ಬಿಎಸ್ ಮಾದರಿ
ಬಳಕೆದಾರರಿಂದ ಮೋಡಲ್ ಅನ್ನು ಮರೆಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
hidePrevented.bs.modal
ಮಾದರಿಯನ್ನು ತೋರಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ, ಅದರ ಬ್ಯಾಕ್ಡ್ರಾಪ್ staticಮತ್ತು ಮೋಡಲ್ನ ಹೊರಗೆ ಒಂದು ಕ್ಲಿಕ್ ಅಥವಾ ಎಸ್ಕೇಪ್ ಕೀ ಪ್ರೆಸ್ ಅನ್ನು ಕೀಬೋರ್ಡ್ ಆಯ್ಕೆಯೊಂದಿಗೆ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ ಅಥವಾ data-keyboardಗೆ ಹೊಂದಿಸಲಾಗುತ್ತದೆ false.