JavaScript

<div class="footer" style="position: absolute; bottom: 0px; width: 95%; margin-left: 2%; z-index: 3;">
<button style="width: 80px; background: url(http://localhost/ELMS/Image.axd?t=Close&r=211&g=211&b=211&p=20&h=25) 0% 0% no-repeat transparent;">Close</button>
</div>
<pre>
None of the following code hiding these html controls
<pre>
                $('.footer').css('display', 'none');
                $('.footer').hide();
                $('.no-repeat.transparent;').css('display', 'none');

1. ELMS.Constructs.Popup = function (parameters) {
2. jQuery.fn.convertLinkToPopupWithClose = 
3. this.containerDiv = $("<div class='container'></div>").css (xxxx...),

if (!ELMS.Constructs) {
    ELMS.Constructs = {};
}

ELMS.Constructs.Popup = function (parameters) {
    var _that = this;

    this.offset = 10;
    this.parameters = parameters;
    this.displayed = false;

    this.waitElement = ELMS.Common.generateWaitDiv("Loading Popup...");

    this.outsideContainerDiv = $("<div class=\"popup\"></div>")
        .css({
            width: "450px",
            top: this.parameters.y.toString() + "px",
            left: this.parameters.x.toString() + "px",
            overflow: "hidden",
            paddingRight: "10px",
            paddingBottom: "10px",
            height: "400px"
        });

    this.containerDiv = $("<div class='container'></div>")
        .css({
            position: "relative",
            marginTop: this.offset.toString() + "px",
            width: "100%",
            paddingBottom: "36px",
            height: "100%"
        })
        .appendTo(this.outsideContainerDiv);

    //this.iframeContainerDiv = $("<div></div>")
    //        .css({
    //            width: "100%"
    //        })
    //        .height(this.parameters.height ? this.parameters.height : 400);

    $("<div class='handle'></div>").appendTo(this.outsideContainerDiv);

    this.createTitle = function (title) {
        _that.titleH2 = $("<h2>" + title + "</h2>");
        _that.containerDiv.prepend(_that.titleH2);
    };

    if (this.parameters.title)
        this.createTitle(parameters.title);

    //this.iframeContainerDiv.appendTo(this.containerDiv);

    this.setTitle = function (title) {
        if (!this.titleH2)
            this.createTitle(title);
        else
            this.titleH2.text(title);
    };

    this.iframe = $('<iframe class="popup" frameBorder="0" allowTransparency="true" name="PopupIframe"></iframe>')
        .css({
            width: "100%",
            height: "100%",//(this.parameters.height ? this.parameters.height : 400).toString() + "px",
            position: "absolute",
            zIndex: 1,
            marginTop: "25px",
            top: 0
        });

    this.iframe.appendTo(this.outsideContainerDiv);

    this.preClose = function () {
        if (_that.parameters.preCloseFunction)
            if (!_that.parameters.preCloseFunction(_that))
                return false;

        return true;
    };

    this.runningInternalClose = false;
    this.internalCloseFunction = function () {
        if (_that.runningInternalClose)
            return;

        _that.runningInternalClose = true;
        if (_that.iframe[0].contentWindow && _that.iframe[0].contentWindow.ELMS && _that.iframe[0].contentWindow.ELMS.Common.isDirty)
            if (!confirm("There are unsaved changes.  Would you like to leave this page?  Any unsaved changes will be lost."))
                return false;

        if (!_that.preClose())
            return false;

        if (_that.parameters.closeDestroys)
            _that.destroy.apply(_that, arguments);
        else
            _that.hide.apply(_that, arguments);

        if (_that.parameters.closeInformsParent) {
            var message = { action: "Close" };

            if (_that.parameters.closePayload)
                message.payload = _that.parameters.closePayload;

            _that.sendMessage(message);
        }

        _that.runningInternalClose = false;

        return true;
    };

    this.upperClose = $("<image alt='Close Popup' border='0' src='" + ELMS.Common.root + "/images/Popup-Close-Button.png' />")
        .css(
            {
                position: "absolute",
                border: "none",
                fontSize: 0,
                backgroundColor: "transparent",
                height: "25px",
                width: "25px",
                right: "0",
                top: "0",
                cursor: "pointer"
            }
            )
        .click(this.internalCloseFunction)
        .appendTo(this.outsideContainerDiv);

    if (this.parameters.showFooter) {
        this.footer = $("<div class=\"footer\"></div>")
            .css({
                position: "absolute",
                bottom: 0,
                width: "95%",
                marginLeft: "2%",
                zIndex: 3
            });


        if (this.parameters.showClose) {
            if (event.target.toString().match(/[^\/]+$/)[0].toString().split('?')[0].toString().split('&')[0].toString() != "Popup_ViewWaitingList.aspx") {
                this.closeButton = $("<button style=\"background:transparent url('" + ELMS.Common.root + "/Image.axd?t=Close&r=211&g=211&b=211&p=20&h=25') left top no-repeat;\">Close</button>").appendTo(this.footer);
                ELMS.Common.handleDynamicButtonImages(this.closeButton);

                this.closeButton.click(this.internalCloseFunction);
            }
        }

        this.footer.appendTo(this.containerDiv);
    }

    this.messageCallbacks = [];
    this.addMessageCallback = function (callback) {
        this.messageCallbacks.push(callback);
        return this;
    };

    var _popup_this = this;
    this.sendMessage = function (payload) {
        if (payload.action.toLowerCase() == "resize") {
            this.resize({ width: payload.payload.width, height: payload.payload.height });
        } else if (payload.action.toLowerCase() == "redirect") {
            _popup_this.destroy();
            ELMS.Common.getTopLevelWindow().ELMS.Common.wait();
            ELMS.Common.getTopLevelWindow().location.href = ELMS.Common.resolveUrl(payload.payload.url || payload.payload.redirectUrl);
        } else if (_popup_this.messageCallbacks.length == 0 && payload.action.toLowerCase() == "close") {
            if (_popup_this.parameters.showClose && _popup_this.closeButton)
                _popup_this.internalCloseFunction();
            else
                _popup_this.destroy();
        } else {
            for (var i = 0, callback; callback = _popup_this.messageCallbacks[i]; i++) {
                callback(_popup_this, payload);
            }

            $(ELMS.Common.getTopLevelWindow().document).trigger("ELMS:ReceivePopupMessage", [ _popup_this , payload ]);
        }
    };

    this.setPreCloseFunction = function (preCloseFunction) {
        this.parameters.preCloseFunction = preCloseFunction;
    };

    this.show = function (title, element) {
        if (element) {
            ELMS.Common.dimElementBackground(element);
        } else {
            ELMS.Common.dimBackground();
        }

        var div = this.outsideContainerDiv,
            body = ELMS.Common.getTopLevelWindow().document.body;

        if (div.parent().length > 0) {
            div.show();
        } else {
            if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
                var html = $("html")[0];

                if (html.scrollTop > 0)
                    div.css("top", (25 + html.scrollTop).toString() + "px");
            } else {
                var bodyScrollTop = document.scrollTop ? document.scrollTop : body.scrollTop;
                if (bodyScrollTop > 0)
                    div.css("top", (25 + bodyScrollTop).toString() + "px");
            }

            div.appendTo(body);

            if (!this.parameters.sourceIframe && !this.parameters.sourceElement && this.parameters.url)
                this.iframe.prop("src", this.parameters.url);

            if (!this.parameters.sourceIframe)
                this.wait();

            this.iframe.load(this.iframeLoaded);

            if (this.parameters.sourceIframe)
                this.iframeLoaded({ target: this.iframe[0] });

            div.draggable({ handle: ".handle" });
        }

        this.displayed = true;

        return this;
    };

    this.dimBackground = function () {
        var div = this.outsideContainerDiv,
            height = div.height() - this.offset,
            width = div.width() + 1;

        $("<div class='dimBG'></div>")
            .css({
                position: "absolute",
                top: this.offset.toString() + "px",
                left: 0,
                height: height.toString() + "px",
                width: width.toString() + "px",
                background: "transparent url('" + ELMS.Common.root + "/images/Transparent-Bg.png') left top repeat",
                zIndex: 3
            })
            .appendTo(div);

        //Disable the upper-right close button -- this technically breaks the boundary of our BG cover, so someone could click it.
        this.upperClose.css("cursor", "default").off("click", this.internalCloseFunction);
    };

    this.undimBackground = function () {
        this.outsideContainerDiv.find(".dimBG").remove();
        this.upperClose.css("cursor", "pointer").click(this.internalCloseFunction);
    };

    this.wait = function (message) {
        this.outsideContainerDiv.data("oldHeight", this.outsideContainerDiv.height());
        this.outsideContainerDiv.height(this.containerDiv.outerHeight() + 10);

        this.waitElement.find("p").text(message);

        this.dimBackground();
        this.waitElement.appendTo(this.containerDiv).center(this.containerDiv);
    };

    this.unwait = function () {
        this.outsideContainerDiv.height(this.outsideContainerDiv.data("oldHeight"));

        this.undimBackground();
        this.waitElement.remove();
    };

    this.iframeContentLoaded = function (popup) {
        if (popup) {
            //ELMS.ActivePopup = popup;

            var urlChanged = popup.currentUrl && popup.currentUrl != popup.iframe[0].contentWindow.location.href;
            popup.currentUrl = popup.iframe[0].contentWindow.location.href;

            if (popup.iframe[0].contentWindow.ELMS)
                popup.iframe[0].contentWindow.ELMS.ParentPopup = popup;

            $(popup.iframe[0].contentWindow).resize(function () {
                if (!popup.resizing)
                    popup.resize({ basedOnContent: true });
            });

            if (popup.parameters.showTitle && !popup.parameters.title) {
                var text = $(popup.iframe[0].contentDocument).find(".title,h2").first().remove().text();

                if (popup.titleH2)
                    popup.titleH2.text(text);
                else
                    popup.createTitle(text);
            }

            var actionButtons = $(popup.iframe[0].contentDocument.body).find(".action-buttons");
            if (popup.parameters.showFooter && actionButtons.length > 0) {
                var clone;

                if (urlChanged && popup.parameters.processedActionButtons) {
                    this.footer.find(".action-buttons").remove();
                    popup.parameters.processedActionButtons = false;
                }

                if (popup.parameters.processedActionButtons) {
                    clone = this.footer.find(".action-buttons").find("button,input[type='submit']").remove();
                    popup.parameters.processedActionButtons = false;
                }

                if (!popup.parameters.processedActionButtons) {
                    popup.parameters.processedActionButtons = true;

                    clone = actionButtons.clone().css({
                        float: "left",
                        margin: 0,
                        padding: 0,
                        border: "none",
                        width: "auto"
                    });

                    if (popup.parameters.showClose && this.closeButton.parent().length > 0) {
                        this.closeButton.before(clone);

                        if (actionButtons.find("input[value='Cancel']").length > 0)
                            this.closeButton.remove();
                    } else
                        clone.appendTo(this.footer);
                }

                var sourceButtons = actionButtons.find("button,input[type='submit']");
                clone.find("button,input[type='submit']").each(function (index, button) {
                    var sourceButton = sourceButtons[index];
                    button = $(button);
                    button
                        //.off("click")
                        .click(function (event) {
                            $(sourceButton).click();
                        });

                    button.data(popup.iframe[0].contentWindow.$(sourceButton).data());

                    //This is a bit weird, but the event needs to be attached to the JQuery instance in the iframe.
                    //At the time this code is executed, $ by itself references the host page's JQuery instance.
                    popup.iframe[0].contentWindow.$("#" + sourceButton.id)
                        .on("prop", function (event) {
                            button.prop.apply(button, [].splice.call(arguments, 1));
                        })
                        .on("attr", function (event) {
                            button.attr.apply(button, [].splice.call(arguments, 1));
                        })
                        .on("removeProp", function (event) {
                            button.removeProp.apply(button, [].splice.call(arguments, 1));
                        })
                        .on("removeAttr", function (event) {
                            button.removeAttr.apply(button, [].splice.call(arguments, 1));
                        });
                });

                popup.containerDiv.height(popup.containerDiv.height() - actionButtons.height());
                actionButtons.hide();

                if (popup.parameters.showClose && actionButtons.has("input[type='submit'][value='Close']").length > 0)
                    this.closeButton.remove();
            }

            if (popup.parameters.sourceElement) {
                var form = $("#form1")[0];

                if (form.removeAttribute)
                    form.removeAttribute("target");
                else
                    form.target = null;

                form.action = form.action.substring(0, form.action.length - 6);
            }

            popup.unwait();

            window.setTimeout(function () {
                popup.resize({ load: true, urlChanged: urlChanged });
            }, 250);
        }
    },

    this.iframeLoaded = function (event) {
        var popup = ELMS.WebControls.Popup.getPopup(event.target);
        
        if (popup.parameters.sourceIframe && popup.parameters.sourceIframe.tagName && popup.parameters.sourceIframe.tagName == "IFRAME") {
            popup.iframe[0].contentWindow.document.open();

            var html = $(popup.parameters.sourceIframe.contentWindow.document.documentElement).html();

            if ($.browser.msie)
                html = html.replace(/\<script/gi, "<script defer='true'");

            popup.iframe[0].contentWindow.document.write(html)
            popup.iframe[0].contentWindow.document.close();
        }

        $(event.target.contentDocument).ready
        (
            function () {
                popup.iframeContentLoaded(popup);
            }
        );
    };

    this.hide = function (parameters) {
        parameters = $.extend({ destroy: true, runCloseFunction: false }, parameters);
        if (parameters.runCloseFunction && !_that.preClose.call(this))
            return;

        var topWindow = ELMS.Common.getTopLevelWindow();
        if (this.displayed) {
            if (parameters.destroy)
                this.outsideContainerDiv.remove();
            else
                this.outsideContainerDiv.hide();  //just hiding

            if (parameters.element) {
                ELMS.Common.undimElementBackground(element);
            } else {
                ELMS.Common.undimBackground();
            }

            this.displayed = false;
        }

        if (parameters.destroy) {
            var popups = topWindow.ELMS.Page.Popups;

            for (var i = 0, popup; popup = popups[i]; i++) {
                if (popup == this)
                    popups.splice(i, 1);
            }
        }

        return this;
    };

    this.resize = function (parameters) {
        this.resizing = true;
        parameters = $.extend({ height: null, width: null, basedOnContent: false, load: false, urlChanged: false }, parameters);

        //If nothing sent in, ignore!!
        if (!parameters.height && !parameters.width && !parameters.basedOnContent && !parameters.load)
            return;

        parameters.widthSupplied = parameters.width != null;
        parameters.heightSupplied = parameters.height != null;

        var iframeBody = this.iframe[0].contentDocument ? this.iframe[0].contentDocument.body : this.iframe[0].contentWindow.document.body,
            titleH2Height = null;

        if (this.titleH2)
            titleH2Height = this.titleH2.outerHeight();

        if ((!this.parameters.height && parameters.load) || parameters.basedOnContent) {
            //this.iframeContainerDiv.height(0);

            parameters.height = iframeBody.clientHeight;// + ($.browser.msie ? 35 : 0);
        } else if (this.parameters.height)
            parameters.height = this.parameters.height;

        if (parameters.heightSupplied)
            this.parameters.height = parameters.height;

        if (parameters.height)
            this.containerDiv.animate({ height: parameters.height + (titleH2Height || 10) }, 250); //10 is offset of top margin
            //this.containerDiv.height(parameters.height);

        if ((!this.parameters.width && parameters.load) || parameters.basedOnContent) {
            if (parameters.basedOnContent || parameters.urlChanged || (parameters.load && !this.widthResized)) {
                parameters.width = iframeBody.scrollWidth - 10;//10 - right padding on container div for close button's transparency effect// + ($.browser.msie ? 75 : 25);

                this.widthResized = true;
            }
        } else if (this.parameters.width)
            parameters.width = this.parameters.width;

        if (parameters.widthSupplied)
            this.parameters.width = parameters.width;

        if (parameters.width)
            this.outsideContainerDiv.width(parameters.width);

        //this.iframe.css("height", "100%");

        this.outsideContainerDiv.height(this.containerDiv.height() + 400);

        if (titleH2Height != null)
            this.iframe.css("margin-top", (titleH2Height + 11).toString() + "px"); //11 is 10 for offset of top margin plus 1 for border of h2

        var _that = this;
        window.setTimeout(function () { _that.resizing = false; }, 250);
    };

    this.destroy = function (parameters) {
        this.hide(parameters);
        ELMS.Common.unregisterPopup(this);
    };

    if (this.parameters.sourceElement) {
        var _popup = this;

        $(this.parameters.sourceElement).click(
            function (event) {
                var form = $("#form1")[0];

                form.target = "PopupIframe";

                var qs = ELMS.Common.parseQueryString(form.action);
                if (typeof qs.Popup == "undefined")
                    form.action += (Object.keys(qs).length == 0 ? "?" : "&") + "Popup";

                _popup.show();
            });
    }
}

var control =
    {
        name: "Popup",
        getPopup: function (iframeOrUrl) {
            for (var i = 0, popup; popup = ELMS.Common.getTopLevelWindow().ELMS.Page.Popups[i]; i++) {
                if (typeof iframeOrUrl == "string") {
                    if (popup.parameters.url == iframeOrUrl ||
                        (popup.iframe && popup.iframe[0].contentWindow.location.href == iframeOrUrl))
                        return popup;
                } else {
                    if (popup.iframe) {
                        if (popup.iframe[0] == iframeOrUrl)
                            return popup;
                    } else {
                        if (popup.parameters.url == iframeOrUrl.src)
                            return popup;
                    }
                }
            }

            return null;
        },
        createPopup: function (parameters) {
            if (parameters.width)
                parameters.widthProvided = true;

            parameters = $.extend({ x: 20, y: 20, showClose: false, showTitle: true, closeDestroys: true, showFooter: true }, parameters);

            if (!parameters.url && !parameters.sourceElement && !parameters.sourceIframe) {
                alert("parameters.url must be specified (Popup.createPopup).");
                return;
            }

            if (parameters.showClose)
                parameters.showFooter = true;

            if (parameters.url) {
                var qs = ELMS.Common.parseQueryString(parameters.url),
                qsCount = 0;
                if (!qs.Popup) {
                    for (var prop in qs)
                        if (prop != parameters.url)
                            qsCount++;

                    parameters.url += (qsCount == 0 ? "?" : "&") + "Popup";
                }
            }

            var topWindow = ELMS.Common.getTopLevelWindow();
            parameters.headerHeight = topWindow.$("#header").height();
            if (parameters.headerHeight && parameters.headerHeight > parameters.y)
                parameters.y = parameters.headerHeight + 50;

            var popup = new ELMS.Constructs.Popup(parameters);

            if (!topWindow.ELMS.Page.Popups) {
                topWindow.ELMS.Page.Popups = [];
            }
            topWindow.ELMS.Page.Popups.push(popup);
            ELMS.Common.registerPopup(popup);

            if (popup.parameters.sourceIframe && popup.parameters.sourceIframe.tagName && popup.parameters.sourceIframe.tagName == "IFRAME") {
                popup.iframe.css("display", "block");
                popup.show();
            }

            return popup;
        },
        convertLinkToPopupWithClose: function (event, informParentOnClose) {
            return ELMS.WebControls.Popup.convertLinkToPopup(event, { showClose: true, closeInformsParent: informParentOnClose | false });
        },
        convertLinkToPopup: function (event, parameters) {
            event.preventDefault();
            event.stopPropagation();

            var hyperlink = $(event.target).closest("a")[0],
                parameters = $.extend(
                    {
                        url: hyperlink.href,
                        caller: hyperlink,
                        event: event,
                        buttonSelector: ".buttons",
                        usesHelp: false,
                        title: event.target["title"]
                    }, parameters);

            var popup = ELMS.WebControls.Popup.createPopup(parameters);

            if (ELMS.Page.receivePopupMessage)
                popup.addMessageCallback(ELMS.Page.receivePopupMessage);

            popup.show();

            return popup;
        }
    };

ELMS.Common.registerWebControl(control);

jQuery.fn.convertLinkToPopup = function () {
    this.each(function (index, element) {
        $(element).click(ELMS.WebControls.Popup.convertLinkToPopup);
    });
};

jQuery.fn.convertLinkToPopupWithClose = function () {
    this.each(function (index, element) {
        $(element).click(ELMS.WebControls.Popup.convertLinkToPopupWithClose);
    });
};

<ul id="reports-All_Reports" class="active"><li class="report">Child DatesDetailed date information about an individual child (for DEL only).</li><li class="report">Child DemographicsCharacteristics of children and families enrolled in ECEAP</li><li class="report">Child Record SummaryEnrollment, health, child development and family information for an individual child.</li><li class="report">Class ListLists Class names and characteristics.</li><li class="report">Class RosterLists child names, birthdate,  first language,  parent name and contact information, with space for staff to add notes.</li><li class="report">Class SummaryShows information entered on the Class pages of ELMS for one class, or compiled for a site, contractor or (for DEL staff) statewide.</li><li class="report">Contractor ListLists Contractor names and characteristics.</li><li class="report">Developmental ScreeningChildren's development screening dates and results.</li><li class="report">Directors RosterList of ECEAP contractors, funded ECEAP slots, directors, contact information and counties served.</li><li class="report">ELMS Site Data for Early AchieversList of all ECEAP and Head Start sites for the current school year.</li><li class="report active">Enrollment by Child<span class="description">Lists children with their age, poverty level, IEP status, priority points and first and last days attending class. 

<input id="phb_rdbCurrentEnrollment" type="radio" name="ctl00$phb$ReportMode" value="rdbCurrentEnrollment" checked="checked">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Student Scores</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="student_scores.js"></script>
</head>

<body>
<div id="content">
    <h1>Student Scores</h1>
    <div class="formLayout">
        <label>Last Name:</label>
        <input type="text" id="last_name" /><br />

        <label>First Name:</label>
        <input type="text" id="first_name" /><br />

        <label>Score:</label>
        <input type="text" id="score" /><br />

        <label>&nbsp;</label>
        <input type="button" id="add_button" value="Add Student Score" /><br />
    </div>
    <h2>Student Scores</h2>
    <p><textarea id="scores" rows="5" cols="60"></textarea></p>
    <div class="formLayout">
        <label>Average score:</label>
        <input type="text" id="average_score"/><br />

        <label>&nbsp;</label>
        <input type="button" id="clear_button" value="Clear Student Scores" /><br />

        <label>&nbsp;</label>
        <input type="button" id="sort_button" value="Sort By Last Name" /><br />
    </div>
</body>
</html>

var scores = [];

var $ = function (id) { return document.getElementById(id) }

var displayScores = function () {
    var scoreNumber = parseInt( $("score").value );
    var scoreString = $("last_name").value + ", " +
                      $("first_name").value + ": " +
                      $("score").value;

        if (scoreSting.length == 0) {

    for (var i = 0; i < displayScores.length; i++) {
        var scores = displayScores[i];
        for (var i in scores) { displayScores += scores[scoreString] + ", ";  }
    $("average_score").value = getAverageScore(scoreNumber);
}
var addScore = function () {
    var scoreNumber = parseInt( $("score").value );
    var scoreString = $("last_name").value + ", " +
                      $("first_name").value + ": " +
                      $("score").value;
    scores.push(scoreNumber);
    scoresString.push(scoreString);
    displayScores();
}
var getAverageScore = function () {
    var scoreNumber = score.length;
    var sum = 0;
    if (scoreNumber > 0) {
        for (var i = 0; i in scoreNumber; i++)
            sum += score[i][2];
    }
    $("average_Score").value = sum / scoreNumber;
}
var sortScores = function () {
    scoresString.sort();
    displayScores();
}
}
window.onload = function() {
    $("add_button").onclick = add_button;
    $("sort_button").onclick = sort_button;
}