How to set a modal background?

I have been trying to set a modal background on my page as per the settings described here: http://foundation.zurb.com/docs/components/joyride.html

My code that doesn't seem to be working is:

<li data-class="region-sidebar-first" data-button="Next" data-options="tipLocation:right;modal:true">
  <h2>The Buyer's Side!</h2>
  <p>Find all of the information from the buyer's side here, including contact details, their wall and their sale!</p>
</li>

I can control where the tip is located with this code, just not add a modal.

Any ideas where I'm going wrong? Thanks, Mark