弹出窗口打开后如何禁用/灰显父窗口

Question

我有一段代码会在用户点击表格中的图标时触发弹出窗口。现在，我想在打开弹出窗口后灰色/禁用父窗口，然后在弹出窗口关闭后将父窗口恢复正常。

尽管之前已经提出过这个问题，但我已尝试过在SO中给出的一些例子，但我没有得到预期的结果，所以请帮助我。

$(document).on("click", ".popup-trigger", function (event) {
    alert("i am inside");

    // var currentrow = $(this).closest("tr");
    // var sino = currentRow.find("td:eq(1)").text(); // get SI no from checkbox
    // alert(sino);

    var scrollTop = '';
    var newHeight = '100';

    $(window).bind('scroll', function() {
        scrollTop = $( window ).scrollTop();
        newHeight = scrollTop + 100;
    });
    
    $('.popup-trigger').click(function(e) {
        alert( $('#grn').val());
        $("#sino").val($(this).closest('tr').children()[1].textContent);
        $("#iname").val($(this).closest('tr').children()[2].textContent);
        $("#recqty").val($(this).closest('tr').children()[4].textContent);

        e.stopPropagation();
        
        if (jQuery(window).width() < 767) {
            $(this).after( $( ".popup" ) );
            $('.popup').show().addClass('popup-mobile').css('top', 0);

            $('html, body').animate({
                scrollTop: $('.popup').offset().top
            }, 500);
        } else {
            $('.popup').removeClass('popup-mobile').css('top', newHeight).toggle();
        };
    });

    $('html').click(function() {
        $('.popup').hide();
    });

    $('.popup-btn-close').click(function(e){
        $('.popup').hide();
    });

    $('.popup').click(function(e){
        e.stopPropagation();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="popup">
    SI no:        <input type ="text" readonly="readonly" id = "sino" class="inp"/><br>
    Item name:    <input type ="text" readonly="readonly" id="iname" class="inp"/><br>
    Received Qty: <input type ="text" readonly="readonly" id ="recqty" class="inp"/><br>
    <span class="popup-btn-close">close</span>
</div>