Help with a script...

[zeeshan_haider000]

Hi,

 

You can see the demo of the script here. It just makes the background opaque and creates a popup so only the contents inside of a popup are accessible.

What i want is that instead of the body of popup i want the content of layer 1 in there? how do i do that?

Help would be appreciated thanks

 

Script:

<script type="text/javascript">

      //----------

      function addEvent(obj ,evt, fnc)
      {
        if (obj.addEventListener)
          obj.addEventListener(evt,fnc,false);
        else if (obj.attachEvent)
          obj.attachEvent('on'+evt,fnc);
        else
          return false;
        return true;
      }

      function removeEvent(obj ,evt, fnc)
      {
        if (obj.removeEventListener)
          obj.removeEventListener(evt,fnc,false);
        else if (obj.detachEvent)
          obj.detachEvent('on'+evt,fnc);
        else
          return false;
        return true;
      }

      //----------

      function appendElement(node,tag,id,htm)
      {
        var ne = document.createElement(tag);
        if(id) ne.id = id;
        if(htm) ne.innerHTML = htm;
        node.appendChild(ne);
      }

      //----------

      function showPopup(p)
      {
        greyout(true);
        document.getElementById(p).style.display = 'block';
      }

      function hidePopup(p)
      {
        greyout(false);
        document.getElementById(p).style.display = 'none';
      }

      //----------

      function greyout(d,z)
      {
        var obj = document.getElementById('greyout');

        if(!obj)
        {
          appendElement(document.body,'div','greyout');
          obj = document.getElementById('greyout');
          obj.style.position = 'absolute';
          obj.style.top = '0px';
          obj.style.left = '0px';
          obj.style.background = '#111';
          obj.style.opacity = '.5';
          obj.style.filter = 'alpha(opacity=50)';
        }
        if(d)
        {
          var ch = document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
          var cw = document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
          var sh = document.documentElement.scrollHeight ? document.documentElement.scrollHeight : document.body.scrollHeight;
          if(document.body.scrollHeight) sh = Math.max(sh,document.body.scrollHeight)
          var sw = document.documentElement.scrollWidth ? document.documentElement.scrollWidth : document.body.scrollWidth;
          if(document.body.scrollWidth) sh = Math.max(sh,document.body.scrollWidth)
          var wh = window.innerHeight ? window.innerHeight : document.body.offsetHeight;
          if(!z){ z = 50 }
          obj.style.zIndex = z;
          obj.style.height = Math.max(wh,Math.max(sh,ch))+'px';
          obj.style.width  = Math.max(sw,cw)+'px';
          obj.style.display = 'block';
          addEvent(window,'resize',greyoutResize);
        }
        else
        {
          obj.style.display = 'none';  
          removeEvent(window,'resize',greyoutResize);
        }
      }

      function greyoutResize()
      {
        var ch = document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
        var cw = document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
        var sh = document.documentElement.scrollHeight ? document.documentElement.scrollHeight : document.body.scrollHeight;
        if(document.body.scrollHeight) sh = Math.max(sh,document.body.scrollHeight)
        var sw = document.documentElement.scrollWidth ? document.documentElement.scrollWidth : document.body.scrollWidth;
        if(document.body.scrollWidth) sh = Math.max(sh,document.body.scrollWidth)
        var wh = window.innerHeight ? window.innerHeight : document.body.offsetHeight;
        var obj = document.getElementById('greyout');
        obj.style.height = ch+'px';
        obj.style.width  = cw+'px';
        obj.style.height = Math.max(wh,Math.max(sh,ch))+'px';
        obj.style.width  = Math.max(sw,cw)+'px';
      }

      //----------

    </script>

[Adam]

Layer 1? As in, the pop up wrapper div?

 

Looks like the actual pop up HTML is just within the <body>, hidden with "display:none;". So whatever ID you use when calling the pop up - e.g. showPopup('mypopup'); - then you'd just use:

 

var layer1 = document.getElementById('mypopup');
// 'layer1.innerHTML' would now contain the content!

 

Is this what you were looking for?

 

Regards

[zeeshan_haider000]

Layer 1? As in, the pop up wrapper div?

 

Looks like the actual pop up HTML is just within the <body>, hidden with "display:none;". So whatever ID you use when calling the pop up - e.g. showPopup('mypopup'); - then you'd just use:

 

var layer1 = document.getElementById('mypopup');
// 'layer1.innerHTML' would now contain the content!

 

Is this what you were looking for?

 

Regards

 

Sorry by layer1 i meant to show the background (instead of the popup i want that place to be not greyedout and left untouched)... i just want that 'lights-out' effect as found on some sites such as flickr, youtube etc.. and by the way how do you make the grey-out effect's color to be more darker in the above script?

Thanks,

Zee