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>