having more than one popup page

[droidus]

i have the following code on my site. i have two different boxes that I would like to show up. what would be the best way to do it?

jquery:

// Position modal box in the center of the page
    jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( jQuery(window).height() - this.height() ) / 2+jQuery(window).scrollTop() + "px");
        this.css("left", ( jQuery(window).width() - this.width() ) / 2+jQuery(window).scrollLeft() + "px");
        return this;
      }

    jQuery(".modal-profile").center();

    // Set height of light out div  
    jQuery('.modal-lightsout').css("height", jQuery(document).height());    

    
    jQuery('a[rel="modal-profile"]').click(function() {
        jQuery('.modal-profile').fadeIn("slow");
        jQuery('.modal-lightsout').fadeTo("slow", .5);
    });

    // closes modal box once close link is clicked, or if the lights out divis clicked
    jQuery('a.modal-close-profile, .modal-lightsout').click(function() {
        jQuery('.modal-profile').fadeOut("slow");
        jQuery('.modal-lightsout').fadeOut("slow");
    });

and then the html:

<div class="modal-lightsout"></div>
<div class="modal-profile">
    <h2>File Upload</h2>
    <a href="#" title="Close this window" class="modal-close-profile"><img border="0px" src="http://mysite.com/images/x.png" alt="Close profile window" /></a>
    
    <iframe src="http://mysite.com/images/upload.php" scrolling="no" width="350px" height="400px" frameborder="0"></iframe>
    </div>

[droidus]

anybody???