How can I load a html page within a pure CSS popup?

I have made a html page (index.html) which includes a link to a pure CSS pop up modal. I would like to load a second html page (content.html) within the CSS pop up so that it is displayed as though it was being loaded in a browser.

The idea is that I can set the modal pop up's size to match the size of the content from the content.html page.

Is this possible and can you give any pointers on how I can do this?

Thank you.
technologysmithsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Russ SuterCommented:
You'd need to use an iframe to load one page within another. Unfortunately I don't know of a way of resizing the iframe to fit its contents without using javascript.
1
technologysmithsAuthor Commented:
Okay many thanks - can you point me to any resources that show how JavaScript can be used to do this?

I am building a php/MySQL based quiz application that I would like to have displayed and run within a  modal popup. I would like this to be 100% compatible with all browsers and devices so I was trying to avoid JavaScript and just use html  and CSS.

Any pointers you can give will be much appreciated.

Thanks
0
hieloCommented:
Let's say your modal has a div intended for the content:
<div id="quiz_content"></div>

You can:
A. Inject an iframe into the div, and have the iframe retrieve the remote page:
$('#quiz_content').html('<iframe src="yourPage.html"/>');

B. use the .load() method to "import" the remote page and extract a part of it, and just inject that portion.  For example, let's say that yourPage.html has:
<div id="mainContent">...</div>

and you only want that "mainContent" inserted into <div id="quiz_content"/>, then you can use:
$('#quiz_content').load('yourPage.html #mainContent');

You will need to load the jquery library first of course:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
https://developers.google.com/speed/libraries/
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
technologysmithsAuthor Commented:
Thank you Hielo, much appreciated!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.