want to disable page behind div.

Question

3.00/5 (1 vote)

See more:

I have grid on page and some buttons on the page.

i made one div and by setting its top,left,right width made it show like a pop up and make it visible on clicking of button.

now when div get visible like a pop up on page i want back page to be disabled means user cant perform any action over it.

Please let me know how to do this

Any appropriate answer will be appreciated.

Posted 2-May-12 2:06am

miligupta123

Add a Solution

Comments

PJ003 2-May-12 8:25am

it can be done through AJAX UpdatePanel

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

L Viljoen · Answer 1 · 2012-05-02T02:27:00

OK here's what you have to do

Create a semi transparent gif, or transparent gif

create an image tag

HTML

<img src="transp.gif" style="zindex=20; position:absolute; Top:0; Left:0; witdh:100%; height:100%" />

and then create your div remember the index to set it above the image

HTML

<div id="hideUnhideEct" style="zindex=21">div content</div>

it still bears some experimenting and cross browser testing but I used this before, you should also consider using position:absolute on your div and image

Please keep in mind the position absolute restrictions in IE9 (for some reason they messed it up) easiest solution is to remove the doctype from the header of the document.

Remember when setting 100% width and height to include in your stylesheet

CSS

body, html, form{
width:100%;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

Sandeep Mewara · Answer 2 · 2012-05-02T02:43:00

Basic logic is to play with CSS. There is a z-index that plays a role in putting up a layer. Show the overlaying div when needed and then hide it back.

I got this sometime back from net. Not mine. Try:

CSS

.parentDisable
{
  z-index:999;
  width:100%;
  height:100%;
  display:none;
  position:absolute;
  top:0;
  left:0;
  background-color: #000;
  color: #aaa;
  opacity: .4;
  filter: alpha(opacity=50);
}
#popup
{
  width:300;
  height:300;
  position:relative;
  color: #000;
  background-color: #fff;
  top:25%;
}
#close
{
  position:absolute;
  top:0;
  right:0;
}

JavaScript

function pop(div)
{
  document.getElementById(div).style.display='block'
  return false;
}
function hide(div)
{
  document.getElementById(div).style.display='none'
  return false;
}

XML

<body>
 <div id="pop1" class="parentDisable">
  <center>
    <div id="popup">
        This is popup 1
        <input title="Click" type="button" name="Click Me" value="Click Me" />
        <a href="#" onclick="return hide('pop1')">
           <div id="close">
               <img src="close.png" width="40px" height="40px" />
           </div>
        </a>
    </div>
  </center>
 </div>
 <center>
    <h3>Simple Popup Div + Background Disable Example</h3>
      <a href="#" onclick="return pop('pop1')">Popup 1</a>
 </center>
</body>

want to disable page behind div.

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0