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}

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}

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