Contact 1

Click Here...

Contact 2

Click Here...

Notifications

Click Here...

Messages

Click Here...

Settings

Click Here...

Centered form

Click Here...

Tabular

Click Here...

Settings

Notifications

Allow notifications

Ajax

Load content without refresh

Sticky topbar

Always display topbar at top

Sticky sidebar

Always display sidebar at left

Folded sidebar

Only display icons in the sidebar

Empty content

You already read all of the messages.

Form



Centered form

Sign in
...

Flora L. Cherry

...

Vito B. Coplin

LB

Lreda R. Bhomas

...

Tracy J. Hanzella

KC

Kurt E. Corris

GS

Gena Stepney

...

Christine C. McFarland

TH

Joe D. Vansickle

...

Dustin J. Kliebert

...

Andrew C. Bell

PB

Pricilla Beaird

VB

Vernice Begay

LP

Kenneth L. Howell

...

Garret Gloss

...

Audrey M. McCusker

ED

Eulah Deweese

ZS

Zora Sieber

...

Dustin J. Kliebert

EW

Emilia Weber

AW

Aja Weedon

Minimal setup

This example shows you how simple is a quickview's markup. Also, shows how you can target it using data-target or href attributes.

See demo
<!-- Button trigger quickview -->
<button class="btn btn-primary" data-toggle="quickview" data-target="#qv-minimal">See demo</button>
<a class="btn btn-primary" data-toggle="quickview" href="#qv-minimal">See demo</a>

<!-- Minimal example -->
<div id="qv-minimal" class="quickview">
  <div class="quickview-body">
    ...
  </div>
</div>

Basic setup

This example demonstarte the usage of .quickview-header and .quickview-footer. .quickview-block only applies 20px padding.

<div id="qv-basic" class="quickview">
  <header class="quickview-header">
    <p class="quickview-title">Quickview title</p>
    <span class="close"><i class="ti-close"></i></span>
  </header>

  <div class="quickview-body">
    <div class="quickview-block">
      ...
    </div>
  </div>

  <footer class="quickview-footer">
    <button class="btn btn-primary">Submit</button>
    <button class="btn btn-secondary" data-dismiss="quickview">Cancel</button>
  </footer>
</div>

Ajax Load

Add data-url attribute to your .quickview, so the content of the quickview will load from the URL you specify. Please consider that it only loads once. If you need to load the content from URL everytime that quickview opens, add data-always-reload="true" to your .quickview.

It's recommended to include a spinner in your .quickview for this type of quickviews.

<div id="qv-url" class="quickview" data-url="path/to/quickview.html"></div>

Modifier classes

.quickview-sm

Applies to .quickview

Decrease width of the quickview to 220px. Default is 300px.

.quickview-lg

Applies to .quickview

Increase width of the quickview to 420px. Default is 300px.

.quickview-xl

Applies to .quickview

Increase width of the quickview to 640px. Default is 300px.

.quickview-xxl

Applies to .quickview

Increase width of the quickview to 860px. Default is 300px.

.backdrop-remove

Applies to .quickview

Remove the backdrop, so clicking outside of the quickview won't cause to close the quickview.

.backdrop-light

Applies to .quickview

Include a light colored backdrop with your quickview.

.backdrop-dark

Applies to .quickview

Include a dark colored backdrop with your quickview.