i'm not sure whether or not this question is best suited here, css or javascript but here goes... i've got a dynamic form i'm working on... i'm trying to make somewhat of a popup confirmation box.. however, i don't want it to be blocked by any popup blockers so i've decided to create it as a hidden div than change it to visible when the time comes.. i've got something along these lines <html> <head> <title>pop-up test</title> <style type="text/css"> #poppy { position: absolute; left: 20px; top: 2px; width: 400px; background-color: #fff; border: 1px solid black; padding: 4px; } </style> </head> <body onload="document.getElementById('poppy').style.visibility = 'hidden'"> <select> <option value="1">something </select> <input type="Button" onclick="document.getElementById('poppy').style.visibility = 'visible'" value=".visibility"> <form action="" method="post" id="poppy"> <h1 style="font-size: x-large;">some pop title</h1> <p>some pop information</p> <div style="text-align: center;"> <input type="button" value="Cancel" onclick="something"> <input type="button" value="Confirm" onclick="something"> </div> </form> </body> </html> Code (markup): as you will see.. if you try that code in IE6 the select menu stays on top of the form..... is there any way to get around this?
anyone have any ideas? i know someone has at least run into this before... my current solution is to set the entire body to hidden than set the form as visible.. however this gives the appearance that you've gone to another page.. so users may start hitting the back button and losing what they've input.. if i were to simply set all the selects as invisible it would look strange.. and there are 12 to 12+3k selects i would need to make invisible