Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

HTML + modal dialog to load external website

Posted on 2016-08-18
10
Medium Priority
?
1,102 Views
Last Modified: 2016-09-07
Hello,

I have an index.html page where I am attempting to call a modal dialog/popup box where I can display a specific page in our website.

I have looked for hours and cannot find a solution.  

ANY HELP would be greatly appreciated.
0
Comment
Question by:Codeaddict7423
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
10 Comments
 
LVL 10

Expert Comment

by:Prasadh Baapaat
ID: 41761284
if you are using Bootstrap, there is in-built code for modal popup..
let me know if you are using bootstrap & version so I can guide you accordingly.

if not using bootstrap, let me know so I can give some other solution
0
 
LVL 10

Expert Comment

by:Prasadh Baapaat
ID: 41761286
here is a link for a how to do modal popup page on w3schools...

modal popup
0
 

Author Comment

by:Codeaddict7423
ID: 41761290
Hello Prasadh,

Thank you for the quick reply.

I am not using Bootstrap.  My project is a demo for a KIOSK application and it's just using HTML5 and cSS3 for now.  I am trying to display a modal popup that contains an external URL.

ANY help would be greatly appreciated.
0
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 

Author Comment

by:Codeaddict7423
ID: 41761301
Hello Prasadh,

Thank you for your suggestion.  I saw the website with the examples of modal popups.  However, I am trying to load a page from an external website.

Can you help?
0
 
LVL 10

Expert Comment

by:Prasadh Baapaat
ID: 41761374
I have used modal in bootstrap but not in plain html... however I have used javascript to pop up a external url in a modal type look... its a new browser window that opens...

here is a example you can test and use it on your page.

<body>
<a onclick="popupCenter('http://www.expert-exchange.com', 'myPop1',700,500);" href="javascript:void(0);">CLICK TO OPEN POPUP</a>
<script>
function popupCenter(url, title, w, h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}
</script>
</body>

Open in new window


it is not the perfect modal popup you asked for, but sharing if it may help.

PS: I will check if i can find some modal solution and post if someone has not already posted something.

thanks,
Prasadh
0
 

Author Comment

by:Codeaddict7423
ID: 41761417
Prasadh,

That's great! it worked. Now I'm trying to make is such that users are blocked outside the popup and their only option is to 'close' the popup window to get back to the original page.

I would really appreciate your thoughts on this.

thanks,

Luis
0
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1000 total points (awarded by participants)
ID: 41762024
The code you were given by Prasadh Baapaat last answer is a pop up and not a modal.  A modal is part of a page that is essentially hidden until called, then is displayed over other content and appears as a pop up.  

What you were given opens up another window and will not give you what you are after.

However, I am trying to load a page from an external website.
users are blocked outside the popup and their only option is to 'close' the popup window to get back to the original page.

Please make sure you give us ALL your parameters up front in your original question.  Many times what you meant to say and are providing don't match ;)

As far as loading a page from an external site, first make sure that sites terms of service d not prevent you from loading their content on your own.  If you are ok to do so, you will inject an iframe into your modal code, then display your modal with buttons as needed such as closing or proceeding.

I think what you are after is more than what your original question intends.  For now, stick with creating a modal using outside content.  Then ask a new question on restricting  the page until your button is pressed.  This keeps new concepts in separate threads and makes it easier to understand.
0
 
LVL 10

Accepted Solution

by:
Prasadh Baapaat earned 1000 total points (awarded by participants)
ID: 41762238
Hi Codeaddict,
As Scott said, I did not give relevant answer... you wanted a modal and also the modal should close only after interacted with it...

so I have modified & split the w3schools example and giving it here in easy form so you can implement it.

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

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 70%;
}

/* The Close Button */
[code].close {
	font-family: Verdana, Geneva, sans-serif;
    color: #666;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #d10000;
    text-decoration: none;
    cursor: pointer;
}

Open in new window

add this to HTML page where you want link to modal to appear
<h2>Heading</h2>

<!-- Trigger/Open The Modal -->
<a href="http://www.experts-exchange.com" target="iframe_a" id="myBtn">Open Modal</a>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" title="Close">x</span>
    <iframe name="iframe_a" width="95%"height="600px"></iframe> 
  </div>

</div>

Open in new window


add this Script below you html code OR just above the </body> tag
<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

</script>

Open in new window


I have tested this page on my machine and works fine.... the user has to click on the Close "X" to get out of the modal.

I hope this solves your problem.

thanks,
Prasadh
1
 
LVL 10

Expert Comment

by:Prasadh Baapaat
ID: 41762244
PS: I have used Scotts suggestion on using Iframe
0
 
LVL 10

Expert Comment

by:Prasadh Baapaat
ID: 41787476
I guess this is the best way.
0

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question