Glossary Item Box

Squirrelcart v6.1.0

Custom Modal Windows

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.