In case you wonder how I get the exit popup as on the screenshot:
1. The popup code:
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;"> </td>
<td style="background-color: #32d0d9;"> </td>
<td style="background-color: #ff6961;"> </td>
<td style="background-color: #32d93b;"> </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-popup-dialog.no-title .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.
Thanks!