Jekyll One

Fulltext Search

A modal is a small pop-up window that appears on top of a web page. It is used to show important information, ask a question, or get a response from the visitor. The J1 Template comes with a rich set of advanced Bootstrap modals that you can drop into any page.

Because a modal appears on top of the page, the rest of the content is dimmed. This focuses the visitor’s attention on the message and makes sure important information is not missed.

5-10 Minutes to read

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..

Yes, please No, thanks

Modal Success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.

Yes, please No, thanks

Modal Info

admin-dashboard-bootstrap

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.

Yes, please No, thanks

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..

Yes, please No, thanks

Modal Danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.

v52gs1

Yes, please No, thanks

Modal Warning

avatar.jpg

Jane

Consultant

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Yes, please No, thanks

Modal Success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.

  • Cras justo odio 1
  • Dapibus ac facilisis in 2
  • Morbi leo risus 3
  • Cras justo odio 4
  • Dapibus ac facilisis in 5
  • Morbi leo risus 6
Yes, please No, thanks

Modal Info

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.

  • Cras justo odio 1
  • Dapibus ac facilisis in 2
  • Morbi leo risus 3
  • Cras justo odio 4
  • Dapibus ac facilisis in 5
  • Morbi leo risus 6
Yes, please No, thanks

Modal Examples

Modals are a good way to draw your reader’s attention to important information. The J1 Template provides extra modal styles that match the tone of the message — from a friendly note to a serious warning. You can pick a style that fits the importance of what you want to say:

  • a calm info style for general notes,

  • a warning style for things readers should be careful about,

  • a critical style for messages that must not be missed.

For more details on how Bootstrap’s modal plugin works, see the Bootstrap documentation.

Table 1. Selected Extended Bootstrap examples
Postion Class Example

top (full-width)

info

top-right

success

top-left

info

bottom (full-width)

info

bottom-right

danger

bottom-left

warning

full-height right

success

full-height left

info

What next

Bootstrap is a powerful framework for building responsive websites. But even Bootstrap can be improved. One example is the way tables are shown on small screens like phones and tablets.

The J1 Template adds a new design for responsive tables, built on top of Bootstrap. The design uses simple CSS styles to make tables easy to read on every device and browser. This is especially helpful for visitors using mobile phones, where space is limited and standard tables can be hard to read.

See for yourself what J1 Responsive Tables can do!