Add close button to popup
<p>How do add a close button to the following popup by putting a cross on the target page?
Currently it closes if I click anywhere outside the box, but would prefer a Cross "X" on the box or the corner.</p>

<pre><code>    &lt;script language="javascript"&gt;

    $(document).ready(function() {

        //Change these values to style your modal popup
        var align = 'center';                                   //Valid values; left, right, center
        var top = 100;                                          //Use an integer (in pixels)
        var width =700;                                         //Use an integer (in pixels)
        var padding = 10;                                       //Use an integer (in pixels)
        var backgroundColor = '#FFFFFF';                        //Use any hex code
        var source = '../page.php';                                 //Refer to any page on your server, external pages are not valid e.g. http://www.google.co.uk
        var borderColor = '#333333';                            //Use any hex code
        var borderWeight = 4;                                   //Use an integer (in pixels)
        var borderRadius = 5;                                   //Use an integer (in pixels)
        var fadeOutTime = 300;                                  //Use any integer, 0 = no fade
        var disableColor = '#666666';                           //Use any hex code
        var disableOpacity = 40;                                //Valid range 0-100
        var loadingImage = '../images/loading.gif';     //Use relative path from this page

        //This method initialises the modal popup
        $(".modal").click(function() {
            modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
        });

        //This method hides the popup when the escape key is pressed
        $(document).keyup(function(e) {
            if (e.keyCode == 27) {
                closePopup(fadeOutTime);
            }
        });

    });

&lt;/script&gt;

&lt;script&gt; 

function closePopup(fadeOutTime) {

    fade('outerModalPopupDiv', fadeOutTime);
    document.getElementById('blockModalPopupDiv').style.display='none';

}

function modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, url, loadingImage){

    var containerid = "innerModalPopupDiv";

    var popupDiv = document.createElement('div');
    var popupMessage = document.createElement('div');
    var blockDiv = document.createElement('div');

    popupDiv.setAttribute('id', 'outerModalPopupDiv');
    popupDiv.setAttribute('class', 'outerModalPopupDiv');

    popupMessage.setAttribute('id', 'innerModalPopupDiv');
    popupMessage.setAttribute('class', 'innerModalPopupDiv');

    blockDiv.setAttribute('id', 'blockModalPopupDiv');
    blockDiv.setAttribute('class', 'blockModalPopupDiv');
    blockDiv.setAttribute('onClick', 'closePopup(' + fadeOutTime + ')');

    document.body.appendChild(popupDiv);
    popupDiv.appendChild(popupMessage);
    document.body.appendChild(blockDiv);

    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
     var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
       if(ieversion&gt;6) {
         getScrollHeight(top);
       }
    } else {
      getScrollHeight(top);
    }

    document.getElementById('outerModalPopupDiv').style.display='block';
    document.getElementById('outerModalPopupDiv').style.width = width + 'px';
    document.getElementById('outerModalPopupDiv').style.padding = borderWeight + 'px';
    document.getElementById('outerModalPopupDiv').style.background = borderColor;
    document.getElementById('outerModalPopupDiv').style.borderRadius = borderRadius + 'px';
    document.getElementById('outerModalPopupDiv').style.MozBorderRadius = borderRadius + 'px';
    document.getElementById('outerModalPopupDiv').style.WebkitBorderRadius = borderRadius + 'px';
    document.getElementById('outerModalPopupDiv').style.borderWidth = 0 + 'px';
    document.getElementById('outerModalPopupDiv').style.position = 'absolute';
    document.getElementById('outerModalPopupDiv').style.zIndex = 100;

    document.getElementById('innerModalPopupDiv').style.padding = padding + 'px';
    document.getElementById('innerModalPopupDiv').style.background = backgroundColor;
    document.getElementById('innerModalPopupDiv').style.borderRadius = (borderRadius - 3) + 'px';
    document.getElementById('innerModalPopupDiv').style.MozBorderRadius = (borderRadius - 3) + 'px';
    document.getElementById('innerModalPopupDiv').style.WebkitBorderRadius = (borderRadius - 3) + 'px';

    document.getElementById('blockModalPopupDiv').style.width = 100 + '%';
    document.getElementById('blockModalPopupDiv').style.border = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.padding = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.margin = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.background = disableColor;
    document.getElementById('blockModalPopupDiv').style.opacity = (disableOpacity / 100);
    document.getElementById('blockModalPopupDiv').style.filter = 'alpha(Opacity=' + disableOpacity + ')';
    document.getElementById('blockModalPopupDiv').style.zIndex = 99;
    document.getElementById('blockModalPopupDiv').style.position = 'fixed';
    document.getElementById('blockModalPopupDiv').style.top = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.left = 0 + 'px';

    if(align=="center") {
        document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
        document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
    } else if(align=="left") {
        document.getElementById('outerModalPopupDiv').style.marginLeft = 0 + 'px';
        document.getElementById('outerModalPopupDiv').style.left = 10 + 'px';
    } else if(align=="right") {
        document.getElementById('outerModalPopupDiv').style.marginRight = 0 + 'px';
        document.getElementById('outerModalPopupDiv').style.right = 10 + 'px';
    } else {
        document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
        document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
    }

    blockPage();

    var page_request = false;
    if (window.XMLHttpRequest) {
        page_request = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try {
            page_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                page_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) { }
        }
    } else {
        return false;
    }


    page_request.onreadystatechange=function(){
        if((url.search(/.jpg/i)==-1) &amp;&amp; (url.search(/.jpeg/i)==-1) &amp;&amp; (url.search(/.gif/i)==-1) &amp;&amp; (url.search(/.png/i)==-1) &amp;&amp; (url.search(/.bmp/i)==-1)) {
            pageloader(page_request, containerid, loadingImage);
        } else {
            imageloader(url, containerid, loadingImage);
        }
    }

    page_request.open('GET', url, true);
    page_request.send(null);

}
&lt;/script&gt;
</code></pre>

<p>Page opens with this link</p>

<pre><code>&lt;a class="modal" href="javascript:void(0);"&gt;here&lt;/a&gt;
</code></pre>
