Question

How can I use FancyBox or JQuery to create multiple pop-up DIVs that all use the same class (no IDs) on one page? For example, I have 50 products on a single page that all have the same class names.

<div class="popup_box"> <!-- OUR PopupBox DIV-->
    <h1>This IS A Cool PopUp 1</h1>
    <div class="closePopup">Close</div> 
</div>
<div class="overlay_box"></div>
<div class="menu_item_container"> <!-- Main Page -->
    <h1 class="container_header">Sample 1</h1>
</div>

<div class="popup_box"> <!-- OUR PopupBox DIV-->
    <h1>This IS A Cool PopUp 2</h1>
    <div class="closePopup">Close</div> 
</div>
<div class="overlay_box"></div>
<div class="menu_item_container"> <!-- Main Page -->
    <h1 class="container_header">Sample 2</h1>
</div>
<div class="popup_box"> <!-- OUR PopupBox DIV-->
    <h1>This IS A Cool PopUp 3</h1>
    <div class="closePopup">Close</div> 
</div>
<div class="overlay_box"></div>
<div class="menu_item_container"> <!-- Main Page -->
    <h1 class="container_header">Sample 3</h1>
</div>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready( function() {

        // When site loaded, load the Popupbox First
        $('.container_header').click( function() {          
            loadPopupBox();
        });

    $('.closePopup').click( function(){

            unloadPop()

        });



    });

    function loadPopupBox() {   // To Load the Popupbox
            $('.popup_box').fadeIn("slow");
            $('.overlay_box ').fadeIn("slow");      
        }

        function unloadPop(){

            $('.popup_box').fadeOut("slow");
            $('.overlay_box ').fadeOut("slow");
            }


</script>

THE CSS

<style type="text/css">
/* popup_box DIV-Styles*/
.overlay_box{
    display:none;
    position:fixed;  
    _position:absolute; /* hack for internet explorer 6*/  
    height:100%;  
    width:100%;  
    top:0;  
    left:0;  
    background:#000000;  
    border:1px solid #cecece;  
    z-index:1; 


    }
.popup_box { 
    display:none; /* Hide the DIV */
    position:fixed;  
    _position:absolute; /* hack for internet explorer 6 */  
    height:300px;  
    width:600px;  
    background:#FFFFFF;  
    left: 300px;
    top: 150px;
    z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
    margin-left: 15px;  

    /* additional features, can be omitted */
    border:2px solid #ff0000;   
    padding:15px;  
    font-size:15px;  
    -moz-box-shadow: 0 0 5px #ff0000;
    -webkit-box-shadow: 0 0 5px #ff0000;
    box-shadow: 0 0 5px #ff0000;

}

.menu_item_container{
    background: #d2d2d2; /*Sample*/
    width:100%;
    height:100%;
}

h1.container_header{  
cursor: pointer;  
} 

/* This is for the positioning of the Close Link */
.closePopup {
    font-size:20px;  
    line-height:15px;  
    right:5px;  
    top:5px;  
    position:absolute;  
    color:#6fa5e2;  
    font-weight:500;    
}
</style>

It should work like this example (please click on the product to test pop-up):

http://www.grubhub.com/order.jsp?custId=263838&cityId=5&orderId=18429055&searchable=true&deliverable=true&verified=false&poiSearchTerm=null

Answer 1

You should do something like this:

$('.container_header').click( function() {          
    $(this).parent().prev().prev('.popup_box').fadeIn("slow");
});

$('.closePopup').click( function(){
    $('.popup_box').fadeOut("slow");
    $('.overlay_box ').fadeOut("slow");
});

SEE DEMO (Result Only)

SEE CODE HERE