« BootstrapComponents/Modal » : différence entre les versions
De Semantic MediaWiki - Sandbox
(Page créée avec « → Back to [[{{BASEPAGENAME}}|Bootstrap Components overview]] == Description == The Modal component is a dialog box/popup window that is displayed on top of the current... ») |
(add info about CSS adaptions) |
||
| Ligne 23 : | Ligne 23 : | ||
<bootstrap_modal text="[[File:Blue marker.png]]" heading="Better watch this!">[[File:KarateKat.jpg]]</bootstrap_modal> | <bootstrap_modal text="[[File:Blue marker.png]]" heading="Better watch this!">[[File:KarateKat.jpg]]</bootstrap_modal> | ||
=== CSS adaptions === | |||
There may be issues with "modal" on some skins. In this case just add the following CSS to you "MediaWiki:Common.css" page.<ref>https://github.com/oetterer/BootstrapComponents/issues/8</ref><syntaxhighlight lang="css"> | |||
/** BootstrapComponents | |||
* hide modal-backdrop | |||
*/ | |||
.modal-backdrop { | |||
display: none; | |||
} | |||
/* | |||
* get clear of the header elements | |||
*/ | |||
.modal { | |||
top: 60px; | |||
} | |||
</syntaxhighlight> | |||
=== References === | |||
<references /> | |||
[[Category:Bootstrap Components examples]] | [[Category:Bootstrap Components examples]] | ||
Version du 9 février 2018 à 10:11
→ Back to Bootstrap Components overview
Description
The Modal component is a dialog box/popup window that is displayed on top of the current page.
For available options to this component, please see the documentation on github.
Examples
With a button trigger
<bootstrap_modal color="info" text="Modal trigger!" heading="This is the modal headline" footer="And some footer text">Lorem ipsum dolor sit amet, ..</bootstrap_modal>
With an image trigger
<bootstrap_modal text="[[File:Blue marker.png]]" heading="Better watch this!">[[File:KarateKat.jpg]]</bootstrap_modal>
CSS adaptions
There may be issues with "modal" on some skins. In this case just add the following CSS to you "MediaWiki:Common.css" page.[1]
/** BootstrapComponents
* hide modal-backdrop
*/
.modal-backdrop {
display: none;
}
/*
* get clear of the header elements
*/
.modal {
top: 60px;
}
