COLOURcode

Modals - plain, coloured, and special effects

Summary of features

Add contextual and/or associational hints to your modals by assigning a single colour class to the modal parent element e.g. blue for information or purple for forms. When applied, this single class will change the colouring of the modal's body, header, footer, text - even the colour of default buttons. Choose from twelve colours (ten named and two for branding), each of which can be altered via a single SASS variable. Vertically centre standard Bootstrap modals by assigning a single additional css class to the modal (CSS solution - no javascript used).

At a glance

  • Add contextual and/or associational colouring to your modals.
  • Style all the main elements with just a single colour class.
  • Choose from up to ten named and two branding colour-sets.
  • All colour-sets based on single SASS-variable base colours.

Standard Bootstrap Modals

It's difficult and complicated to make something simple, but simple to make something difficult and complicated.

Demos:

Centred:

Add .modal-v-centre to the modal element to have it vertically centre on devices wider than 768px .modal.modal-v-centre (CSS solution - no javascript used).

Custombox Bootstrap Modals

This template enables Custombox to be used with standard Bootstrap 3 modal markup as follows: (1) add data-effect="fadein" (for example) to the triger element (e.g. the calling button) and, on any element that you wish to close the modal when clicked/tapped, replace data-dismiss="modal" with onclick="Custombox.close();".

Demos:

Bootstrap Modal styled with .modal-brand1

COLOURcode  modals - Brand1

Last week I changed all my passwords to 'incorrect' so that when I forget it - which I will - I will always be reminded: 'Your password is incorrect.'

Modal with brand1 class applied to modal only .modal.modal-brand1

Demo:

Bootstrap Modal styled with .modal-brand2

COLOURcode  modals - Brand2

Last week I changed all my passwords to 'incorrect' so that when I forget it - which I will - I will always be reminded: 'Your password is incorrect.'

Modal with brand2 class applied to modal only .modal.modal-brand2

Demo:

Bootstrap Modal styled with .modal-blue

COLOURcode  modals - Blue

Last week I changed all my passwords to 'incorrect' so that when I forget it - which I will - I will always be reminded: 'Your password is incorrect.'

Modal with blue class applied to modal only .modal.modal-blue

Demo:

Bootstrap Modal styled with .modal-yellow

COLOURcode  modals - Yellow

Last week I changed all my passwords to 'incorrect' so that when I forget it - which I will - I will always be reminded: 'Your password is incorrect.'

Modal with yellow class applied to modal only .modal.modal-yellow

Demo:

Bootstrap Modal styled with .modal-red

COLOURcode  modals - Red

Last week I changed all my passwords to 'incorrect' so that when I forget it - which I will - I will always be reminded: 'Your password is incorrect.'

Modal with red class applied to modal only .modal.modal-red

Demo:

Bootstrap Modal styled with .modal-green

COLOURcode  modals - Green

Last week I changed all my passwords to 'incorrect' so that when I forget it - which I will - I will always be reminded: 'Your password is incorrect.'

Modal with green class applied to modal only .modal.modal-green

Demo:

Bootstrap Modal styled with .modal-orange

COLOURcode  modals - Orange

Last week I changed all my passwords to 'incorrect' so that when I forget it - which I will - I will always be reminded: 'Your password is incorrect.'

Modal with orange class applied to modal only .modal.modal-orange

Demo:

Bootstrap Modal styled with .modal-purple

COLOURcode  modals - Purple

Last week I changed all my passwords to 'incorrect' so that when I forget it - which I will - I will always be reminded: 'Your password is incorrect.'

Modal with purple class applied to modal only .modal.modal-purple

Demo:

Bootstrap Modal styled with .modal-gold

COLOURcode  modals - Gold

Last week I changed all my passwords to 'incorrect' so that when I forget it - which I will - I will always be reminded: 'Your password is incorrect.'

Modal with gold class applied to modal only .modal.modal-gold

Demo:

Bootstrap Modal styled with .modal-bronze

COLOURcode  modals - Bronze

Last week I changed all my passwords to 'incorrect' so that when I forget it - which I will - I will always be reminded: 'Your password is incorrect.'

Modal with bronze class applied to modal only .modal.modal-bronze

Demo:

Bootstrap Modal styled with .modal-silver

COLOURcode  modals - Silver

Last week I changed all my passwords to 'incorrect' so that when I forget it - which I will - I will always be reminded: 'Your password is incorrect.'

Modal with silver class applied to modal only .modal.modal-silver

Demo:

Bootstrap Modal styled with .modal-grey

COLOURcode  modals - Grey

Last week I changed all my passwords to 'incorrect' so that when I forget it - which I will - I will always be reminded: 'Your password is incorrect.'

Modal with grey class applied to modal only .modal.modal-grey

Demo:

Bootstrap-Dialog Modals
This template provides a framework for the use of Bootstrap-Dialog modals, enabling you to set the modal's title, body-text, width, size, header-colour, close-button (present or not) and trigger element, all via data attributes in the container e.g. <button type="button" data-type="primary" data-closebutton="true" data-toggle="bsdialog-modal" data-size="normal" data-title="Title text here" data-content="Body text here." class="btn btn-primary">Primary</button>

Demos: