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
technologysmithsAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

F IgorDeveloperCommented:
Using jquery/jquery ui api  (See https://jqueryui.com/dialog/#default)
Using an iframe inside dialog container:


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog">
  <iframe src="b.html" style="width:800px;height:600px;border:0px;" ></iframe>
</div>
 
 
</body>
</html>

Open in new window

technologysmithsAuthor Commented:
Thank you fraigor - do you know how I can remove the scroll bars and resize the pop up? Please see a screen shot below:

Image of popup
technologysmithsAuthor Commented:
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:

<style type="text/css">
body {
    overflow:hidden;
}
</style>

Open in new window



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;

Open in new window



Any pointers you can give will be much appreciated, thank you for your help!
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Get the Guide
F IgorDeveloperCommented:
Try using the dialog options like this example (autoresize, automatic width/height)
And only setting initial iframe width/height 

$(function() {
    $( "#dialog" ).dialog({
            autoResize: true,
            width: "auto",
            height: "auto",
            modal: false,
            title: 'Modal title',
            position: ['top', 'center']
        });
  });

Open in new window


See an example https://jsfiddle.net/03tn85nm/2/
technologysmithsAuthor Commented:
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...

Everything but width can be and is set as needed...
F IgorDeveloperCommented:
Ensure you are using this configuration:

In HEAD include the jquery , jquery-ui and jquery-ui css (also you can download and link it locally )

<head>
<script src="//code.jquery.com/jquery-1.10.1.js" ></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js" ></script>
<link rel=stylesheet href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" >
</head>

Your dialog (there is the place to fix the iframe width )

<div id="dialog"  >
  <iframe style="width:800px;height:600px;border:0px solid gray" src="b.html" >      
  </iframe>
</div>

Open in new window



The javascript code to initialize dialog (in body, no position)

<script>  $(function() {
      
    $( "#dialog" ).dialog({
            autoResize: true,
            width: "auto",
            height: "auto",
            modal: false,
            title: 'Your modal title'
        });
       
  });
</script>

Open in new window


using the options from the example you can get it working.
test.zip

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 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!
technologysmithsAuthor Commented:
fraigor went above and beyond to help me - many thanks!
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
HTML

From novice to tech pro — start learning today.