Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1549
  • Last Modified:

HTML + modal dialog to load external website

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
Codeaddict7423
Asked:
Codeaddict7423
  • 6
  • 3
2 Solutions
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
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
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
here is a link for a how to do modal popup page on w3schools...

modal popup
0
 
Codeaddict7423Author Commented:
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Codeaddict7423Author Commented:
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
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
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
 
Codeaddict7423Author Commented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
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
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
PS: I have used Scotts suggestion on using Iframe
0
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
I guess this is the best way.
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now