ניצן Bootstrap ס דזשאַוואַסקריפּט מאָדאַל פּלוגין צו לייגן דיאַלאָגס צו דיין פּלאַץ פֿאַר ליגהטבאָקסעס, באַניצער נאָוטאַפאַקיישאַנז אָדער גאָר מנהג אינהאַלט.
מאָדאַלס נוצן position: fixed, וואָס קענען מאל זיין אַ ביסל באַזונדער וועגן זיין רענדערינג. ווען מעגלעך, שטעלן דיין מאָדאַל HTML אין אַ שפּיץ-מדרגה שטעלע צו ויסמיידן פּאָטענציעל ינטערפיראַנס פון אנדערע עלעמענטן. איר וועט מסתּמא לויפן אין ישוז ווען נעסטינג אַ .modalין אן אנדער פאַרפעסטיקט עלעמענט.
אַמאָל ווידער, רעכט צו position: fixed, עס זענען עטלעכע קייוויאַץ מיט די נוצן פון מאָדאַלז אויף רירעוודיק דעוויסעס. זען אונדזער בלעטערער שטיצן דאָקומענטן פֿאַר דעטאַילס.
רעכט צו ווי HTML5 דיפיינז זייַן סעמאַנטיקס, די autofocusHTML אַטריביוט האט קיין ווירקונג אין באָאָטסטראַפּ מאָדאַלז. צו דערגרייכן די זעלבע ווירקונג, נוצן עטלעכע מנהג דזשאַוואַסקריפּט:
טאַגאַל אַ ארבעטן מאָדאַל דעמאָ דורך געבן אַ קליק דעם קנעפּל אונטן. עס וועט רוק אַראָפּ און וועלקן אין פון די שפּיץ פון די בלאַט.
Modal title
Woohoo, you're reading this text in a modal!
סקראָללינג לאַנג אינהאַלט
ווען מאָדאַלס ווערן צו לאַנג פֿאַר דער באַניצער ס וויופּאָרט אָדער מיטל, זיי מעגילע ינדיפּענדאַנטלי פון די בלאַט זיך. פּרוּווט די דעמאָ אונטן צו זען וואָס מיר מיינען.
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.
פֿאַר מאָדאַלס וואָס פשוט דערשייַנען אלא ווי וועלקן אין צו זען, אַראָפּנעמען די .fadeקלאַס פון דיין מאָדאַל מאַרקאַפּ.
דינאַמיש כייץ
אויב די הייך פון אַ מאָדאַל ענדערונגען בשעת עס איז אָפן, איר זאָל רופן $('#myModal').modal('handleUpdate')צו אַדזשאַסטיד די מאָדאַל שטעלע אין פאַל אַ סקראָלבאַר איז ארויס.
אַקסעסאַביליטי
זייט זיכער צו לייגן role="dialog"און aria-labelledby="...", רעפערענסינג די מאָדאַל טיטל, צו .modal, און role="document"צו .modal-dialogזיך. דערצו, איר קענט געבן אַ באַשרייַבונג פון דיין מאָדאַל דיאַלאָג מיט aria-describedbyאויף .modal.
עמבעדדינג יאָוטובע ווידיאס
עמבעדדינג יאָוטובע ווידיאס אין מאָדאַלז ריקווייערז נאָך דזשאַוואַסקריפּט ניט אין באָאָטסטראַפּ צו אויטאָמאַטיש האַלטן פּלייבאַק און מער. זען דעם נוציק Stack Overflow פּאָסטן פֿאַר מער אינפֿאָרמאַציע.
אָפּטיאָנאַל סיזעס
מאָדאַלס האָבן צוויי אַפּשאַנאַל סיזעס, בנימצא דורך מאָדיפיער קלאסן צו זיין געשטעלט אויף אַ .modal-dialog. די סיזעס בריק אין זיכער ברעאַקפּאָינץ צו ויסמיידן האָריזאָנטאַל סקראָלבאַרס אויף נעראָוער וויופּאָרץ.
Large modal
...
Small modal
...
באַניץ
די מאָדאַל פּלוגין טאַגאַלז דיין פאַרבאָרגן אינהאַלט אויף פאָדערונג, דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. עס אויך מוסיף .modal-openצו די <body>אָווועררייד פעליקייַט סקראָללינג נאַטור און דזשענערייץ אַ .modal-backdropצו צושטעלן אַ גיט געגנט פֿאַר דימיסינג געוויזן מאָדאַלז ווען קליקינג אַרויס די מאָדאַל.