I am trying to make it so that participants in my survey can open a modal that displays another web page in an iframe. The problem is on mobile it does not display properly. I have also tried using the `<embed>` and `<object>` tags, and those display the page correctly, but they don't allow scrolling even with "-webkit-overflow-scrolling: touch;"

Here is the code I have. I am not very familiar with coding. I simply found this and have tried to modify it for my purposes.

<style type="text/css">body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 100; /* Sit on top */
padding-top: 0px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: hidden; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 0px;
border: 0px solid #888;
width: 100%;
height: 100%;
overflow: scroll; /* Enable scroll if needed */
-webkit-overflow-scrolling: touch;
max-height: none;
}

/* The Close Button */
.close {
color: #ffffff;
background-color: rgb(255,0,0);
position: absolute;
padding-left: 8px;
padding-right: 8px;
right: 0px;
font-size: 36px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
<h5>Please use this button to open and read a story. Click the red X in the top right corner when you are finished to continue.</h5>
<button id="myBtn">Open</button>

<div class="modal" id="myModal">
<div class="modal-content"><span class="close">×</span><iframe height="100%" src="https://www.washingtonpost.com/sf/brand-connect/bayer/growing-food-for-a-growing-planet/" width="100%"></iframe></div>
</div>