Glossary Item Box
Overview
Squirrelcart has a modal window feature which is used to gather information from a customer in a window overlaid on top of the current page:
This topic explains how you can add custom modal boxes to your own content in Squirrelcart.
Example Code
The example code below can be included on a page in Squirrelcart and demonstrates how you could add one or more modal windows that interact with each other:
<a href="#" data-modal="modal_test" class="modal_open">test me</a>
<div id="modal_test" class="modal">
<h4>Interested in cheese?</h4>
<div class="inner">
<p>Well?</p>
<a href="#" class="btn btn_yes modal_open" data-modal="modal_test2">Mmmm, Yes! Tell me more.</a>
<a href="#" class="btn btn_no modal_close">No Thanks</a>
</div>
</div>
<div id="modal_test2" class="modal">
<h4>How so?</h4>
<div class="inner">
<p>What kind of cheese?</p>
<a href="#" class="btn btn_yes modal_open" data-modal="modal_test3">Cheddar</a>
<a href="http://www.amazon.com/Finlandia-Swiss-7-5-ounce-igourmet/dp/B00182GKOY/ref=sr_1_3?s=grocery&ie=UTF8&qid=1443641006&sr=1-3&keywords=swiss+cheese" class="btn btn_no">Swiss</a>
<a href="#" class="btn btn_no modal_close">Nevermind</a>
</div>
</div>
<div id="modal_test3" class="modal">
<h4>No way.</h4>
<div class="inner">
<p>You are not ready for that cheese.</p>
<a href="#" class="btn btn_no modal_close">OK</a>
</div>
</div>
© 2001-2017 Lighthouse Development. All Rights Reserved.