unplug1.6: January 2012

Simple way to disable a page to display a message or request a specific user action

This html can be copied and pasted into an html file to view the css, javascript, and html in action.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
.opaqueLayer
{
  display:none;
  position:absolute;
  top:0px;
  left:0px;
  opacity:0.6;
  filter:alpha(opacity=60);
  background-color: #000000;
  z-Index:1000;
}

.questionLayer
{
  position:absolute;
  top:0px;
  left:0px;
  width:350px;
  height:200px;
  display:none;
  z-Index:1001;
  border:2px solid black;
  background-color:#FFFFFF;
  text-align:center;
  vertical-align:middle;
  padding:10px;
}
</style>
<script type="text/javascript">
function getBrowserHeight() {
  var intH = 0;
  var intW = 0;

  if(typeof window.innerWidth == 'number' ) {
    intH = window.innerHeight;
    intW = window.innerWidth;
  }
  else if(document.documentElement &&   (document.documentElement.clientWidth ||   document.documentElement.clientHeight)) {
    intH = document.documentElement.clientHeight;
    intW = document.documentElement.clientWidth;
  }
  else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
    intH = document.body.clientHeight;
    intW = document.body.clientWidth;
  }

  return { width: parseInt(intW), height: parseInt(intH) };
}

function setLayerPosition() {
  var shadow = document.getElementById("shadow");
  var question = document.getElementById("question");

  var bws = getBrowserHeight();
  shadow.style.width = bws.width + "px";
  shadow.style.height = bws.height + "px";

  question.style.left = parseInt((bws.width - 350) / 2);
  question.style.top = parseInt((bws.height - 200) / 2);

  shadow = null;
  question = null;
}

function showLayer() {
  setLayerPosition();

  var shadow = document.getElementById("shadow");
  var question = document.getElementById("question");

  shadow.style.display = "block";
  question.style.display = "block";

  shadow = null;
  question = null;
}

function hideLayer() {
  var shadow = document.getElementById("shadow");
  var question = document.getElementById("question");

  shadow.style.display = "none";
  question.style.display = "none";

  shadow = null;
  question = null;
}

window.onresize = setLayerPosition;
</script>

</head>
<body>
  <div id="shadow" class="opaqueLayer"> </div>
  <div id="question" class="questionLayer">
  <br />
  <br />
  <br />
    Hello!
  <br />
  <br />
  <br />
  <input type="button" onclick="hideLayer();" value="Close" />
</div>

<h3>Modal Layer Test</h3>
<p>Click the image below to display the "modal" layer</p>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Test Image" onclick="showLayer();" />
</body>
</html>

Another option would be to add a control to the page that posts back to the server and then responds with the option to hide layer.

Button on .aspx page
<asp:Button runat="server" ID="UpdateBtn" OnClientClick="hideLayer();" Text="Update" CssClass="Btn" />

Button click event that checks condition
void UpdateBtn_Click(object sender, EventArgs e)
{
  if(SomeCondition){
    InsertAlert();
  }
}

Inserts showLayer script on window load
private void InsertAlert()
{
  ClientScript.RegisterClientScriptBlock(typeof(Page), "InsertAlert", "window.onload = showLayer;", true);
}

unplug1.6

Saturday, January 7, 2012

Disable page to display message with Javascript (Lightbox)