JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background">
    <p>HELLO - This div should not scroll when popup is displayed</p>
<div id="contact-popup-container" style="display: none" class="popup-container">
           <div id="popup-wrapper">
              <div id="popup-contents">
                 <div id="close-button"><a href="javascript:void(0)" onclick="toggle_visibility('contact-popup-container');">X</a></div>
                 <h3>Oh, hi there! How can we help?</h3>
                 <p>We are professionals at what we do and what we do is help you with any and all of your real estate needs. Give us a jingle just to chat, or to list your property, either way we'd love to hear from you. Bye!</p>
                 
             </div>
          </div>
        </div>
<div class="mobile-footer-menu">
   <a style="display:block" href="tel:"><div class="mobile-contact-buttons">
       <p>CALL</p>
   </div></a>
   <div class="mobile-contact-separator">
   </div>
   <a style="display:block" href="javascript:void(0)" onclick="toggle_visibility('contact-popup-container');"><div class="mobile-contact-buttons">    
       <p>EMAIL</p>
   </div></a>
</div>
</div>

CSS

/**************************************/
/* BACKGROUND TO ADD HEIGHT FOR SCROLL*/
/**************************************/
#background {
    background-color: gray;
    height: 1500px;
    width: 350px;
    padding: 40px 20px;
    color: #fff;
    }

/*****************/
/* POPUP STYLING */
/*****************/
.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.85);
    height: 100%;
    width: 100%;
    z-index: 150;
    }
#popup-wrapper {
    max-width: 500px;
    margin: 0 auto;
    }
#popup-contents {
    position: relative;
    background-color: #fff;
    padding: 30px;
    text-align: center;
    height: 500px;
    }
#close-button {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 11px;
    margin-top: 7px;
    font-weight: 500;
    color: #000;
    }
#contact-popup-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    }
#popup-contents p {
    margin-bottom: 14px;
    }

/*****************************/
/* STYLING FOR FIXED BUTTONS */
/*****************************/
.mobile-footer-menu {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    background-color: #eee;
    box-shadow: 0 -1px 5px #888888;
    opacity: .96;
    }
.mobile-contact-buttons {
    float: left;
    height: 50px;
    margin: 0 auto;
    padding-top: 4px;
    text-align: center;
    width: calc(50% - .5px);
    }
.mobile-contact-buttons:hover {
    background-color: #ffaf45;
    color: #fff;
    }
.mobile-contact-separator {
    float: left;
    margin-top: 6px;
    height: 38px;
    width: 1px;
    background-color: #aaa;
    }

JavaScript 1.7

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
       e.style.display = 'none';
    else
       e.style.display = 'block';
}