Minimal setup

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

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-headerand .quickview-footer. .quickview-blockonly applies 20px padding.

See demo
<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-urlattribute 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 spinnerin your .quickviewfor this type of quickviews.

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

Modifierclasses

.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.