background not accessible with javascript

Question

1. I want to make whole background of web-page unclickable with some gray color behind
2. To pop some yes/no decision dialog on front
3. If yes is clicked then redirect to other page (same with no)

how to do that?

Answer 1

Try googling "jQuery UI Dialog". There's plenty of tutorials on this.

Here's a similar Stack Overflow Question: https://stackoverflow.com/questions/...

I'm not sure how to grey out the background (it might even happen automagically with jQuery UI) but to create a new dialog box you need to include the jQuery UI library in your HTML page, include the style sheet too then it's a case of selecting a DOM element and calling the jQuery "dialog" function on it. It would look something like this (note this is not working code):

<div id="dialog" title="my dialog">
    <p>Hello from the dialog</p>
</div>

<script>
    $("#dialog").dialog({
        // set  dialog properties here
    });
</script>

Here's a link to the jQuery dialog documentation: http://jqueryui.com/demos/dialog/

And here's a quick jsFiddle showing a dialog: http://jsfiddle.net/wxKq5/7/

I just checked and the jQuery UI modal dialog greys out the screen for you. I've altered my jsFiddle code for you to show you how to instantiate one.