Question

I have a basic overlay setup using css/html/jquery and it goes like this:

<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>

This allows the link clicked, to open up a simple overlay that can be closed by clicking the X.

My question is, I’d like to have multiple links to click on that either open up their own overlay or use the same one (I’d think using the same iframe is doable). Is there a more simple method for what I’m attempting? I haven’t been able to figure it out short of making separate calls for each different link I have.

edit:

Ideally, I would have 5 or so links, each of them when clicked, opens the overlay and displays the url it’s pointing at. the overlay can then be closed by clicking away on the background or the ‘X’.

Thanks

Answer 1

You are looking for the closest() and next() functions. Also, since you will have multiple links, you will need to use classes instead. Something along these lines should work for you:

$(function() {
    $('.activator').click(function(){
        $(this).next('.overlay').fadeIn('fast', function(){
            $(this).next('.box').show('fast');
        });
    });


    $('.boxclose').click(function(){
        $(this).closest('.box').hide('fast',function(){
            $(this).closest('.overlay').fadeOut('fast');
        });
    });
});

Since you are only wanting one iframe and overlay. Here is a simplified version that should work for you:

HTML:

<a class="activator" href="http://www.google.com/">hello</a>
<a class="activator" href="http://www.bing.com/">hello</a>

<div class="overlay" style="display:none;"></div>
<div class="box" style="display: none;">
    <a class="boxclose">X</a>
    <iframe class="frame" style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;> </iframe>
</div>

Javascript:

$(function() {
    $('.activator').click(function(e){
        e.preventDefault();
        $('.frame').attr("src", this.href);

        $('.overlay').fadeIn('fast', function(){
            $('.box').show('fast');
        });
    });


    $('.boxclose').click(function(){
        $('.box').hide('fast',function(){
            $('.overlay').fadeOut('fast');
        });
    });
});

Live DEMO