Messages

  • Read message 1

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam egestas, mauris sed porttitor placerat, turpis nisl tempor orci, in tristique turpis tortor id lectus.

  • Read message 2

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam egestas, mauris sed porttitor placerat, turpis nisl tempor orci, in tristique turpis tortor id lectus.

  • Read message 3

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam egestas, mauris sed porttitor placerat, turpis nisl tempor orci, in tristique turpis tortor id lectus.

  • Read message 4

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam egestas, mauris sed porttitor placerat, turpis nisl tempor orci, in tristique turpis tortor id lectus.

  • Read message 5

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam egestas, mauris sed porttitor placerat, turpis nisl tempor orci, in tristique turpis tortor id lectus.

Modern Browsers only

Click one of the links in the left side column and message box will pop up and overlay the screen. The rest of the screen will fade and the message box will remain vertically centred even if the page is scrolled.

The effect is achieved by nesting all the content in an element that has opacity set. The only javascript needed is to toggle a class on and off and to select the block to be displayed.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam fermentum posuere magna. Mauris orci mauris, rutrum id, volutpat mol.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam fermentum posuere magna. Mauris orci mauris, rutrum id, volutpat mol.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam fermentum posuere magna. Mauris orci mauris, rutrum id, volutpat mol.