qlmodal - buttons linking to modal window/lightbox
qlmodal generates a button and a modal window.
All you need is two tags like:
- {'qlmodal id="uniqueCustomId" type="button" toggle="modal"}Button text{'/qlmodal}
- {'qlmodal id="uniqueCustomId" type="content" title="Some headline"}Some content{'/qlmodal}
qlmodal - Demo
The following tags generate a custom button (styles from bootstrap template) and the apprpriate modal window.
- {'qlmodal id="uniqueCustomId" type="button" toggle="modal"}Button text{'/qlmodal}
- {'qlmodal id="uniqueCustomId" type="content" title="Some headline"}Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.{'/qlmodal}
qlmodal - Documentation
Generating a button
- Add a tag like following into your article (strip the ' of course):
{'qlmodal id="uniqueCustomId" type="button" toggle="modal"}Button text{'/qlmodal} - Adjust uniqueCustomId with another id if wished. (Mind that id, cause you're going to need it later on.
- Adjust "Button text" inbetween the tags to your needs
Generating the modal content
- Add a tag like following into your article (strip the ' of course):
{'qlmodal id="uniqueCustomId" type="content" title="Some headline"}Some content{'/qlmodal} - Adjust uniqueCustomId with another id if wished. It must be the same id you used for trhe button above.
- Adjust "Some content" inbetween the tags to your needs
Basic Plugin Params
For the plugin jQuery and bootstrap is necessary. If your template already is bootstrap and/or you already use jQuery, set to "no". Otherwise set "yes"
Styles Plugin Params
The styles settings refer to the modal window. Adjust following attributes if you wish:
- Background
- Color
- Headline color
- Link color