technologysmiths
asked on
How to load local html / PHP content into an iframe using modal popup? (html5, javascript and/or CSS) ?
I need to load a formatted html file (b.html) within a modal popup which is launched from a local html file (a.html)
The content of b.html is formatted to 800px x 600px and I would like to be able to display this content within the modal popup without any scroll bars showing.
I would also like to be able to close the modal by clicking an 'X' on the top right of the modal box and no where else on the modal or background...
Please can you provide any help and ideally detailed examples or instructions on how I can go about doing this using modern methods, if possible.
Many Thanks
The content of b.html is formatted to 800px x 600px and I would like to be able to display this content within the modal popup without any scroll bars showing.
I would also like to be able to close the modal by clicking an 'X' on the top right of the modal box and no where else on the modal or background...
Please can you provide any help and ideally detailed examples or instructions on how I can go about doing this using modern methods, if possible.
Many Thanks
ASKER
ASKER
Hi,
As a quick update I found how to remove the scroll bars from the inner (iframe?) page.
I added the below to the b.html page which is loaded within the pop up:
I tried doing the same on the a.html (parent) page but I can't remove the horizontal scroll bar and the popup window also remains a fixed small width no matter what pixel number I set in the section below (it does however respond to the height setting!):
Any pointers you can give will be much appreciated, thank you for your help!
As a quick update I found how to remove the scroll bars from the inner (iframe?) page.
I added the below to the b.html page which is loaded within the pop up:
<style type="text/css">
body {
overflow:hidden;
}
</style>
I tried doing the same on the a.html (parent) page but I can't remove the horizontal scroll bar and the popup window also remains a fixed small width no matter what pixel number I set in the section below (it does however respond to the height setting!):
style="width:800px;height:600px;border:0px;
Any pointers you can give will be much appreciated, thank you for your help!
Try using the dialog options like this example (autoresize, automatic width/height)
And only setting initial iframe width/height
See an example https://jsfiddle.net/03tn85nm/2/
And only setting initial iframe width/height
$(function() {
$( "#dialog" ).dialog({
autoResize: true,
width: "auto",
height: "auto",
modal: false,
title: 'Modal title',
position: ['top', 'center']
});
});
See an example https://jsfiddle.net/03tn85nm/2/
ASKER
Thanks, I have been trying to crack this for hours and cant seem to see how to over-ride the default width settings of 300px regardless of what is set locally. I tried touse examples from the link above with no success...
Should I download the jQuery UI libs locally and manually edit the script/component that is controlling this and then point my pages to the local version?
Many thanks, this has been driving me crazy...
Should I download the jQuery UI libs locally and manually edit the script/component that is controlling this and then point my pages to the local version?
Many thanks, this has been driving me crazy...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you sir - this is much appreciated - I had found a solution which got me 95% of the way there and the info you provided has taken me to a full 100% - thank you!
ASKER
fraigor went above and beyond to help me - many thanks!
Using an iframe inside dialog container:
Open in new window