View Single Post
Old 08-04-2014, 02:40 AM
  xplorer's Avatar 
xplorer xplorer is offline

X-Cart team
Join Date: Jul 2004
Posts: 925

Default Re: New Exit Offers module for X-Cart 5

In case you wonder how I get the exit popup as on the screenshot:

1. The popup code:
<div style="width: 500px; box-shadow: 10px 10px 5px #000;"> <div style="height: 7px;"> <table class="exit-popup-top-border" style="width: 100%; border: none;" border="0"> <tbody> <tr> <td style="background-color: #ffb861;">&nbsp;</td> <td style="background-color: #32d0d9;">&nbsp;</td> <td style="background-color: #ff6961;">&nbsp;</td> <td style="background-color: #32d93b;">&nbsp;</td> </tr> </tbody> </table> </div> <h3 style="padding-bottom: 10px; font-size: 32px; color: #666; font-weight: bold; text-align: center; margin: 1.5em auto 0.5em; width: 350px;">Free shipping on your first order!</h3> <div style="padding: 0.5em 2em 2em; color: #333; font-size: 17px; line-height: 1.3; margin-top: 0.5en;"> <p>All first web orders automatically receive free shipping! It's just one more way we guarantee you unbeatable savings and service.</p> <p style="text-align: center;"><a href="./">Return back to the site</a></p> </div> </div>

2. Extra styles added with the Theme Tweaker module:
Code: .exit-offer-contents { padding: 0; } .ui-dialog.exit-offer-popup-dialog { border-radius: 6px; padding: 0; box-shadow: 2px 2px 25px rgba(0,0,0,0.6); } .ui-dialog.exit-offer-popup-dialog .ui-dialog-titlebar-close { position: absolute; top: 43px; right: 6px; background-size: 10px 10px; background-color: #ddd; width: 20px; height: 20px; border-radius: 12px; background-position: 5px 5px; } .exit-popup-top-border, .exit-popup-top-border tbody, .exit-popup-top-border td, .exit-popup-top-border tr { border: none; } .ui-dialog.exit-offer-popup-dialog, .ui-dialog.exit-offer-popup-dialog .ui-dialog-titlebar, .ui-dialog.exit-offer-popup-dialog .exit-offer-contents, .ui-dialog.exit-offer-popup-dialog .exit-offer-contents + div, .ui-dialog.exit-offer-popup-dialog .exit-offer-contents + div + div, .ui-dialog.exit-offer-popup-dialog .exit-popup-top-border, .ui-dialog.exit-offer-popup-dialog .exit-popup-top-border tbody, .ui-dialog.exit-offer-popup-dialog .exit-popup-top-border tr { border-radius: 6px; } .ui-dialog.exit-offer-popup-dialog .exit-popup-top-border td:first-child { border-top-left-radius: 6px; } .ui-dialog.exit-offer-popup-dialog .exit-popup-top-border td:last-child { border-top-right-radius: 6px; } .exit-popup-top-border td { font-size: 1px; }

The above code is just an example. You should tweak it to make sure that it will appear properly on all target browsers.

Reply With Quote