AddShoppers Help Desk

Support Center

How to show Refer a Friend in a pop-up modal

Last Updated: May 23, 2014 06:24PM EDT

Step 1

Add this CSS to your website CSS file.

​body {
    background:#ddd;
}
.as_raf_overlay{
    display: none;
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index:1001;
    text-align:center;
}

.as_raf_overlay:before {
  content: '';
  position: absolute;
  top: 0; left:0; right:0; bottom:0;
}
.as_raf_overlay .dark-overlay {
    background-color: rgba(0,0,0,.80);
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
.as_raf_modal {
    display: none;
    position: absolute;
    top: 5%;
    left: 0px;
    right: 0px;
    width: 80%;
    margin: 0px auto;
    z-index: 1002;
    text-align: center;
    color: #000;
    background: #fff;
    padding: 25px;
    font-size: 24px;
    font-family: 'Arial', sans-serif;
}
.as_raf_modal *,.as_raf_modal  *:before,.as_raf_modal  *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

Step 2

Copy and paste this HTML/JS into your website:

​<div class="as_raf_overlay" id="exintOverlay" onclick="hideRAF();">
<div class="dark-overlay">&nbsp;</div>
</div>

<div class="as_raf_modal" id="rafModal">
<div id="rafContentWrapper">
<div id="AddShoppersRefer">&nbsp;</div>
<a href="#" onclick="hideRAF(); return false;">Close</a></div>
</div>
<script type="text/javascript">
        function hideRAF() {
            document.getElementById('exintOverlay').style.display = 'none';
            document.getElementById('rafModal').style.display = 'none';
        }
        function showRAF() {
            document.getElementById('exintOverlay').style.display = 'block';
            document.getElementById('rafModal').style.display = 'block';
        }
</script>

Step 3

Use the showRAF() Javascript call on any link or button that you want to open the Refer a Friend modal pop-up with.

Examples:

<button onclick="showRAF();">Show Refer a Friend</button>
​
​<a href="#" onclick="showRAF();">Show Refer a Friend</a>
For a live example, see this page.

Contact Us

  • Please use the floating chat bubble in the bottom right hand side of your screen to initiate a request.

http://assets2.desk.com/
false
addshoppers
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete