在弹出窗口中禁用父页面中的链接

Question

am using the following code to create popup and when popup appears link in parent window are active
*how do i make the parent page inactive while popup active CSS

.popup { position: fixed;background: rgba(255,255,255,.6); left: 25%; top: 25%; width: 50%; height: 350px; margin-top: -75px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px;index: 1;}
        .popup .close {position: absolute; right: -5px; top: -5px; text-decoration: none; background-color: #c41e1e; color: #fff; line-height: 1; border-radius: 50px; width: 1em; text-align: center; z-index: 3;}
        h3 {margin: 0; padding: 5px 10px; background-color:#8AC007;}
        .mask {background-color: #000; z-index: 1; position: absolute; width: 100%; height: 100%; opacity: 0.5;}

HTML
<div class="popup">
        <h3>Select Your City</h3>
        <a href="#" class="close"
           onclick="document.querySelectorAll('.popup')[0].style.display = 'none';
                   document.querySelectorAll('.mask')[0].style.display = 'none';
                   return false;">&times;</a>
                        <p><h4>Major City's</h4>
        </p>
    </div>

only popup should be active all the other should be inactive

Answer 1

Here is a jQuery solution.

<style>
    .popup          { position: fixed;background: rgba(255,255,255,.6); left: 25%; top: 25%; width: 50%; height: 350px; margin-top: -75px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px;index: 1; box-shadow: 2px 2px 10px rgba(0,0,0,0.6); }
    .popup .close   {position: absolute; right: -5px; top: -5px; text-decoration: none; background-color: #c41e1e; color: #fff; line-height: 1; border-radius: 50px; width: 1em; text-align: center; z-index: 3; cursor: pointer; padding: 2px 3px 3px 3px; }
    .popup .close:hover { background-color: #888; }
    h3              {margin: 0; padding: 5px 10px; background-color:#8AC007;}
    .mask           {background-color: #000; z-index: 1; position: absolute; width: 100%; height: 100%; opacity: 0.5;}
    #supawrap       { display: none; height: 100%; width: 100%; position: absolute; background-color: rgba(0,0,0,0.8); top: 0; left: 0; }
</style>
HTML
<div id="supawrap">
    <div class="popup">
        <h3>Select Your City</h3>
        <div class="close">&times;</div>
                        <p><h4>Major City's</h4>
        </p>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
    $(document).ready(function() {
            $('#supawrap').fadeIn('fast');
            $('.close').click(function() {
                $('.popup').fadeOut('fast');
                $('#supawrap').delay(300).fadeOut('fast');
            });
        });
</script>