Solved

HTML + modal dialog to load external website

Posted on 2016-08-18
10
54 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
  • 6
  • 3
10 Comments
 
LVL 9

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 9

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
 

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 9

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 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 9

Accepted Solution

by:
Prasadh Baapaat earned 250 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 9

Expert Comment

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

Expert Comment

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

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses four methods for overlaying images in a container on a web page
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

747 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now