I have a regular php web page. When you click a certain element, a popup appears with more content. The thing is, when the popup appears, if the user scrolls, I want the popup content to scroll. Instead, when the user scrolls, the web page under the popup scrolls. I've tried `.focus()`, but it doesn't seem to work. Maybe it only works on form widgets. Can anyone suggest a solution?

html:

```
<div class="anecdote-thumb" id="anecdote-BOA">
<img src="img/story/web-21090319MMSbuildings3.jpg">
<p class="anecdote-link-p"><strong><a class="anecdote-link" href="#"  onclick="return false;" id="show-BOA">Details</a></strong></p>
</div>

<!------------------ POPUP ---------------------------------->  
<div class="popup" id="popup-BOA">
<div class="close"><i class="fas fa-times-circle"></i></div>
<!-- content here -->
<p class="text-close text-center">Close</p>
</div>  
<!------------------ END POPUP ------------>        

```

css:

```
.popup {
    width: 60%;
    position: fixed;
    height:80%;
    top: 10%;
    left: 20%;
    background-color: white;
    box-shadow: 5px 5px 10px black;
    padding: 30px;
    overflow-y: scroll;
    z-index:99;
    display:none;
}   

```

jquery: 

```
$('.anecdote-link').on('click', function(){
        $('.mask').fadeIn();
        if ( $(this).attr('id') == "show-BOA" ) {
            $('#popup-BOA').fadeIn();
        }
}); 

```