Popup Modal iframe with different web links - html

Question

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

Answer 1

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()">×</div>
<iframe name="modal_iframe" src="demo_iframe.htm"></iframe>
</div>
Stack Overflow<br/>
W3