JavaScript not working in IE
<p>I have a client-side code to generate an overlay and show the data on that overlay. It seems to be working on my local machine on both Mozilla and IE but after I deploy my solution the code doesn't work on IE. Here is my sample code to generate the overlay:</p>

<pre><code>var overlay = document.createElement("div");
overlay.setAttribute("id", "overlay");
overlay.setAttribute("class", "overlay");
document.body.appendChild(overlay);
window.scroll(0, 0);
// create overlay iframe and append to page
var iframe = document.createElement("iframe");
iframe.setAttribute("id", "iframe1");
iframe.setAttribute("class", "overlayiframe");
iframe.setAttribute("src", "" + path);
document.body.appendChild(iframe);

var btnClose = document.createElement("img");
btnClose.setAttribute("id", "btnclose");
btnClose.setAttribute("src", "fancy_close.png");
btnClose.setAttribute("class", "overlayclose");

document.body.appendChild(btnClose);

iframe.onclick = restore;
btnClose.onclick = restore;
return true;
</code></pre>

<p>Can anyone help me how to resolve this problem ?</p>

<p>Here is the complete code:</p>

<p>This is the Webhierarchicaldatagrid rowcoubleclick event. It retrieves all the parameters from the row and save them in path variable. </p>

<pre><code>function WebHierarchicalDataGrid2_Selection_RowSelectionChanged(sender, eventArgs) {
    var grid = $find("WebHierarchicalDataGrid2");
    var parentGrid = grid.get_gridView();

    if (parentGrid != null) {
        var index = parentGrid.get_behaviors().get_selection().get_selectedRows()._keys[0].index;
        var proj = parentGrid.get_behaviors().get_selection().get_selectedRows().getItem(0).get_cell(0).get_text();
        var func = parentGrid.get_behaviors().get_selection().get_selectedRows().getItem(0).get_cell(1).get_text();
        var subfunc = parentGrid.get_behaviors().get_selection().get_selectedRows().getItem(0).get_cell(2).get_text();
        var jurisdiction = parentGrid.get_behaviors().get_selection().get_selectedRows().getItem(0).get_cell(3).get_text();
        var proj_name = parentGrid.get_behaviors().get_selection().get_selectedRows().getItem(0).get_cell(6).get_text();
        var search = " ";

    }
    var path = "Sipoc.aspx?proj_id=" + proj + "&amp;func_id=" + func + "&amp;subfunc_id=" + subfunc + "&amp;jurisdiction_id=" + jurisdiction + "&amp;proj_name=" + proj_name + "&amp;search=" + search;


    clicker(path);
}
</code></pre>

<p>This function generates an overlay on the current page then open Sipoc page on that overlay. This work on IE on my local machine but after I deploy it to the server it does not create any overlay neither opens Sipoc page. But it works fine with Mozilla on remote machine.</p>

<pre><code>function clicker(path) {
    // create overlay and append to page
    var overlay = document.createElement("div");
    overlay.setAttribute("id", "overlay");
    overlay.setAttribute("class", "overlay");
    document.body.appendChild(overlay);
    window.scroll(0, 0);
    // create overlay iframe and append to page
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id", "iframe1");
    iframe.setAttribute("class", "overlayiframe");
    iframe.setAttribute("src", "" + path);
    document.body.appendChild(iframe);

    var btnClose = document.createElement("img");
    btnClose.setAttribute("id", "btnclose");
    btnClose.setAttribute("src", "fancy_close.png");
    btnClose.setAttribute("class", "overlayclose");

    document.body.appendChild(btnClose);

    iframe.onclick = restore;
    btnClose.onclick = restore;
    return true;

}

function restore() {
    document.body.removeChild(document.getElementById("overlay"));
    document.body.removeChild(document.getElementById("iframe1"));
    document.body.removeChild(document.getElementById("btnclose"));
}
</code></pre>
