65.9K
CodeProject is changing. Read more.
Home

Overlay - JavaScript innerhtml with inline from typecast session

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.80/5 (2 votes)

Oct 23, 2013

CPOL
viewsIcon

6962

Overlay - Javascript innerhtml with inline from typecasted Session

Introduction 

In case of problems understanding - please see the previous article:
http://www.codeproject.com/script/Articles/ArticleVersion.aspx?waid=98725&aid=672776

Using the code 

This code uses three JavaScript  functions to open an overlay with content from a Session which was typecast from MyNamespace.MyClass (se how in the link above).

The overlay contains two <a> tags that onClick fires individual functions that closes the overlay and if it is the 'Correct' function, then it sets a value on an asp:Textbox via its id.  

function SetName() {
  window.showWindow.style.display = "none";
  window.showWindow.innerHTML = '';

  document.getElementById("txtName").value = '<%= (Session["MyClass"] as MyClass).getName() %>';
}

function CloseWindow() {
  window.showWindow.style.display = "none";
  window.showWindow.innerHTML = '';
}
        
function OpenWindow(){
  window.showWindow = document.getElementById('Overlay');
  if (window.showWindow.style.display == "none") {
    window.showWindow.style.display = "";
    window.showWindow.innerHTML = 
      '<center>'
      + '<h1>Navn: <%= (Session["MyClass"] as MyClass).getName() %></h1><br />'
      + '<a href="#" onclick="return SetName();">Correct</a> - '
      + '<a href="#" onclick="return CloseWindow();">
  }
}

Notice the use of <%= (Session["MyClass"] as MyClass).getName() %> this needs registration of namespace in web.config or elsewhere. Also notice the use of the quotes - if you use ' on the outside you can use " on the inside. This also works the other way around, but I was unable to escape using \", so if you are doing eg. <asp:textbox id="txtName" runat="server" text="<%=
cleverThingHere.ToString() %>"/>
in the innerhtml - remember to use this correctly.

The overlay Overlay needs the following style:

#Overlay{
  z-index: 99;
  filter: alpha(opacity=95); /*older IE*/
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=95); /* IE */
  -moz-opacity: .95; /*older Mozilla*/
  -khtml-opacity: 0.95;   /*older Safari*/
  opacity: 0.95;   /*supported by current Mozilla, Safari, and Opera*/
  background-color:#FFFFFF;
  position:fixed; top:13%; left:25%; color:#000000; min-width:900px;
} 

and the following div tag in ASPX:

<div id="displaybox" style="display: none;"></div> 

History 

  • Version 1.0.0.0 - let me know if there are bugs :)