I created a basic overlay setup using css, html, and jQuery. Here's how it looks:
<a class="activator" id="activator" style="" href="#">hello</a>
<div class="overlay" id="overlay" style="display:none;"></div>
<div style="display: none;" class="box" id="box">
<a class="boxclose" id="boxclose">X</a>
<iframe src="http://url" style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;"></iframe>
</div>
<script type="text/javascript" src="http://goo.gl/LKdBi"></script>
<script type="text/javascript">
$(function() {
$('#activator').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box').show('fast');
});
});
$('#boxclose').click(function(){
$('#box').hide('fast',function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
With this setup, when you click the link, an overlay pops up that can be closed by clicking the X.
My query is, I want to include multiple links that open their own overlays or share the same one (maybe using the same iframe). Is there a simpler way to achieve this? So far, I haven't found a solution other than making separate calls for each link.
Edit:
Ideally, I'd like to have around 5 links, each opening the overlay and displaying the URL they point to. The overlay should close when clicked away on the background or using the 'X' button.
Thank you