1

I have looked online for this info and have got close but it is not really what I need and Im not sure if it's possible to do or not? so thought I would ask you??

On my main search page, I have lots of HTML link which comes from a database on the server and links to different web sites. ( at the moment the links go directly to there website via the target self)

So what I would like to do is when you click on the link it

loads up a Model popup and iframe with the website itself instead of going directly to there website and leaving mysite. And then press the grey area or X to delete it and then shows the main page.

As I said I got close ie getting the model popup to work but the links would not work

hope you can advise what is the best way to do this?

Thanks

Tim

model pop up visual

Tim Cross
  • 69
  • 5

1 Answers1

0

Use target with name of iframe. Modal should be shown with onClick="showModal()".

Just make sure you have access via CORS to these sites. SO Question about that

function showModal()
{
  $('#modal').show();
}

function hideModal()
{
  $('#modal').hide();
}
#modal {
  position: fixed;
  left: 10%;
  top: 10%;
  height: 300px;
  width: 80%;
  background-color: white;
  display: none;
}

.close {
  position: absolute;
  right: -5px;
  top: -5px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid black;
  text-align: center;
}

iframe {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modal">
  <div class="close" onClick="hideModal()">&times;</div>
  <iframe name="modal_iframe" src="demo_iframe.htm"></iframe>
</div>

<a href="https://stackoverflow.com" target="modal_iframe" onClick="showModal()">Stack Overflow</a><br/>
<a href="https://www.w3schools.com" target="modal_iframe" onClick="showModal()">W3</a>
Justinas
  • 41,402
  • 5
  • 66
  • 96
  • Thanks, got a question: When I test code in Dreamweaver it works but when I load it on to a server: https://www.tc-design.co.uk/test2/test.html and press on one of the links it opens the first page and then you close it. But if you click on another link it loads up the previous page and not the new page?? – Tim Cross Mar 26 '20 at 13:39
  • Check console errors. Maybe iFrame is not reloaded because of error – Justinas Mar 26 '20 at 14:00
  • Ok, well I checked code and no errors have flagged up! will try any find other code to get around the error – Tim Cross Mar 26 '20 at 15:26