Skip to main content

Open div popup with a LightBox effect


Open div popup with a LightBox effect  
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DivBox.aspx.cs"
Inherits="DivBox" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title>Untitled Page</title>
  <script type="text/javascript">

function showBox()
{
  var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;

  var layer = document.createElement('div');
  layer.style.zIndex = 2;
  layer.id = 'layer';
  layer.style.position = 'absolute';
  layer.style.top = '0px';
  layer.style.left = '0px';
  layer.style.height = document.documentElement.scrollHeight + 'px';
  layer.style.width = width + 'px';
  layer.style.backgroundColor = 'black';
  layer.style.opacity = '.6';
  layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=60)");
  document.body.appendChild(layer);

  var div = document.createElement('div');
  div.style.zIndex = 3;
  div.id = 'box';
  div.style.position = (navigator.userAgent.indexOf('MSIE 6') > -1) ? 'absolute' : 'fixed';
  div.style.top = '200px';
  div.style.left = (width / 2) - (400 / 2) + 'px';
  div.style.height = '50px';
  div.style.width = '400px';
  div.style.backgroundColor = 'white';
  div.style.border = '2px solid silver';
  div.style.padding = '20px';
  document.body.appendChild(div);

  var p = document.createElement('p');
  p.innerHTML = 'Some text';
  div.appendChild(p);

  var a = document.createElement('a');
  a.innerHTML = 'Close window';
  a.href = 'javascript:void(0)';
  a.onclick = function()
  {
    document.body.removeChild(document.getElementById('layer'));
    document.body.removeChild(document.getElementById('box'));
  };

  div.appendChild(a);
}
</script>
</head>
<body style="height:2000px">
  <form id="form1" runat="server">
  <div>


<a href="javascript:void(showBox())">Toggle box</a>


  </div>
  </form>
</body>
</html>
Labels:

Comments

Post a Comment

Popular posts from this blog

SonarQube Configuration For .NET Core Web API

When multiple developers are working on the same project, it's good to have a code review. SonarQube is a tool through which we can evaluate our code. Here, for demo purposes, we are going to evaluate the web API which is built on .NET Core. Let's see step by step implementation. In order to run SonarQube, we need to install JAVA in our local system.   Refer to the below link to download JAVA installer and install JAVA. https://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html Configure the 'PATH' system variable under environment variables Go to Control Panel > System > Advanced System Settings, it will open the System Properties window. Click on the "Environment Variables" button. Click on the "View" button under User Variables. Give the variable name as 'JAVA_HOME'. The variable value will be your JDK path where you installed JAVA. Select path variable under system variable and click o...
Post a Comment
Read more

PNR Status by web Scraping Method (ASP.NET) C#

To Get the PNR Status by web Scraping Method Steps to Execute the Function Step 1 : Add the below method in your Form and Pass the PNR Number arguement public string GetPNRStatus( string sPNR) { string URI = "http://www.indianrail.gov.in/cgi_bin/inet_pnrstat_cgi.cgi" ; string Parameters = Uri .EscapeUriString( "lccp_pnrno1=" +sPNR+ "&amp;submitpnr=Get Status" ); System.Net. HttpWebRequest req = ( HttpWebRequest )System.Net. WebRequest .Create(URI); //HTTP POST Headers req.ContentType = "application/x-www-form-urlencoded" ; req.Host = "www.indianrail.gov.in" ; //You can use your own user-agent. req.UserAgent = "Mozilla/5.0 (compatible; MSIE 7.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0) DELL;Venue Pro" ; req.Headers.Add( HttpRequestHeader .AcceptLanguage, "en-us,en;q=0.5" ); req.Headers.Add( HttpRequestHeader .AcceptCharset, "ISO-8859-1,utf-8;q=...
20 comments
Read more

create sorting for a Grid View

Code to create Sorting for a GridView in ASP.net in Code Behind? Step 1: Add the Property in your Class   public string SortField {             get {                 return ( string ) ViewState [ "_sortField" ];             }             set {                 ViewState [ "_sortField" ] = value ;             }         }         public string SortDir {             get {                 return ( string ) ViewState [ "_sortDir" ];             }             set {                 ViewState [ "_sortDir" ] = value ;           ...
Post a Comment
Read more