Question

Here is what I’m trying to do.

I have a ajax request to a webservice.
The webservice return a basic html content.

When the ajax call is in the complete method, I Append the result in the html document like that $(document).append(MyResult);

Q1- I want to create an overlay between the “MyResult Content” and the current page with a div with a width:100% and height:100%. That way, no body will be able to click something else except “MyResult Content”.
How can I do this. I play with the zIndex , but nothing seem to work.

Q2- By Example: if “MyResult Content” return a button and on that button, there is an onclick event that make an other ajax request that will result of a new Html Content, I would like to do the same thing has I explain in Q1. I want a overlay between the result and the entire web page.

Thanks a lot.

Answer 1

To cover the whole window with your div set the position style property to fixed. zindex will only work when the position is absolute, fixed, or relative.

Do you have a code sample for what you are trying to do for Q2?