How do I make this jquery popup function reusable?

Question

So I am using this code: http://jsfiddle.net/xSmNs/

    $(document).ready(function() {

        $('#lightbox_button').click(function() {
            $('#lightbox').fadeIn('slow');
            $('#lightbox_panel').fadeIn('slow');
        });

        $('#close_lightbox').click(function() {
            $('#lightbox').fadeOut('slow');
            $('#lightbox_panel').fadeOut('slow');
        });

    });

To make popups on click of a link. I want multiple links that output different divs. I was going to just make multiple instances of this code (changing the id so that the buttons open their corresponding divs) but I am wondering if there is a more efficient method using this code ?

Answer 1

You can use $.fn.lightbox as a function itself and apply it on a DOM object.

http://jsfiddle.net/7rfpwctm/2/

 $(document).ready(function() { $.fn.lightbox = function(){ $(this).click(function() { $('#lightbox').fadeIn('slow'); $('#lightbox_panel').fadeIn('slow'); }); $('#close_lightbox').click(function() { $('#lightbox').fadeOut('slow'); $('#lightbox_panel').fadeOut('slow'); }); }; $('#lightbox_button').lightbox(); $('#another_lightbox_button').lightbox(); });

 #lightbox_panel { position: relative; z-index: 99; width: 500px; height: 100px; margin: 30px auto 0; background-color: #CCC; display: none; padding: 10px; } #lightbox { z-index: 90; position: absolute; background-color: #000; opacity: 0.8; filter: alpha(opacity=80); width: 100%; height: 100%; display: none; top: 0; } #close_lightbox { } #lightbox_button{ position:absolute; left:0; top:100%; width:200px; } #another_lightbox_button{ position:absolute; right:0; top:100%; width:400px; } .button { position: absolute; text-decoration: none; padding: 2px 10px; border: 1px solid #000; display: inline-block; bottom: 10px; left: 50%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <a href="#" id="lightbox_button"> <div class="button">button</div> </a> <a href="#" id="another_lightbox_button"> <div class="button">another button</div> </a> <div id="lightbox_panel"> <h1>lightbox panel</h1> <a href="#" id="close_lightbox"> <div class="button">close</div> </a> </div> </div> <div id="lightbox"></div>

Something like this helps?

Answer 2

Give the light box button 2 data-attributes, which points to the divs which needs to be popup when clicking on that. Also use a common class for all light box buttons.

<a href="#" class="lightbox_button" data-box="#lightbox" data-panel="#lightbox_panel">
        <div class="button" >button</div>
    </a>

Then you can re-use the code like,

$('.lightbox_button').click(function () {
    $($(this).data("box")).fadeIn("slow");
    $($(this).data("panel")).fadeIn("slow");
});

Fiddle

Answer 3

You could use this function:

function doModal(boxid,show) {
   if (show) {
      $('#'+boxid).fadeIn('slow');
      $('#'+boxid+'_panel').fadeIn('slow');
   } else {
      $('#'+boxid).fadeOut('slow');
      $('#'+boxid+'_panel').fadeOut('slow');
   }
}

And then on your buttons or links:

<span onclick="doModal('Box1',true)">Open Box 1</span>
<span onclick="doModal('Box2',true)">Open Box 2</span>

For closing the boxes:

<span onclick="doModal('Box1',false)">Close Box 1</span>
<span onclick="doModal('Box2',false)">Close Box 2</span>