Click here to Skip to main content
15,895,709 members
Articles / Web Development / ASP.NET
Tip/Trick

Overlay - JavaScript innerhtml with inline from typecast session

Rate me:
Please Sign up or sign in to vote.
4.80/5 (2 votes)
23 Oct 2013CPOL 6.8K   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.  

JavaScript
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:

CSS
#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:

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

History 

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
Denmark Denmark
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --