Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Overlay - JavaScript innerhtml with inline from typecast session

0.00/5 (No votes)
23 Oct 2013 1  
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="<%= <br />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 :)

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here