Block a <div> to avoid interacting with the content

Question

I have two divs, one inside the other, and i want block the inside div (div2) for guest users, so they can't interactuate with that div, I want they only can see the image that generates the javascript.

This is the code:

<DIV id="div1" style="overflow:hidden; position:fixed; top:80px; left:0px; height:52; width:177; "  onClick="location.href='login.php'">

<div id="div2">
<script type="text/javascript" src="/chat/livehelp_js.php?eo=1&relative=Y&amp;department=1&amp;serversession=0&amp;pingtimes=60&amp;filter=Y&amp;"></script>
</div>

</DIV>

I tried with z-index and it don't works

What can i do for lock the div2? Thanks

Answer 1

Bear in mind that if you 'block' div2 using css (or embedded style tags) they can be easily undone. A couple of clicks in FireBug and the div would be 'unblocked'. Also 'manually' issuing a request against the url would bypass any 'blocking'.

Would it not be better for the service at /chat/livehelp... or similar to return and empty div when the user is not logged in?

Answer 2

I'm not sure i could help you, but with plugins like jQuery-UI (or maybe Kendo-UI?) u can easily manage dialog forms

es. Dialog demo

otherwise i think u have to hack with some js + css + html tricks...

Answer 3

Try to make another transparent div over the one, you need to block.

Try this: Create a Modal Dialog

Just make overlay div visible, if not logged in, and hidden, if logged in.