Hola ! Acá otra vez yo con un problema, esta vez me está super comiendo la cabeza, a ver si me pueden echar una mano..
Tengo un popup de login (con su css, javascript y html), el problema es que si no pongo la visibilidad en false del div en el que se encuentra, me bloquea todos los demás controles de la página, no puedo hace absolutamente nada más que abrir y cerrar el popup.
Si le dejo la visibilidad en true (o directamente no pongo nada), no me abre el div con el login.
Pongo el codigo html del div (está al final del form, antes del </body>:
<div id="popup" runat="server" style="display:none;">
<div class="content-popup">
<div class="close">
<a href="#" id="close">
<img src="imgs/close.png"></a>
</div>
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<table id="table">
<tr>
<td>
<ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" WatermarkText="Email" TargetControlID="txtEmail">
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="No se igreso usuario" ControlToValidate="txtEmail">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server" WatermarkText="Contraseña" TargetControlID="txtPassw">
<asp:TextBox ID="txtPassw" runat="server" TextMode="Password"></asp:TextBox><asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPassw" ErrorMessage="No se ingreso contraseña" Text="*"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:ValidationSummary ID="ValidationSummary1" runat="server">
</td>
</tr>
</table>
<br>
<asp:Button ID="iniciar" Text="Entrar" runat="server" OnClick="btnLogin_Click" CssClass="btn-circle" Font-Italic="True" Font-Bold="True" BorderWidth="0px" Width="50px" Height="30px">
</div>
</div>
</div>
<div class="popup-overlay"></div>
El js que abre y cierra el div (puesto en el head):
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#open').click(function () {
$('#popup').fadeIn('slow');
$('.popup-overlay').fadeIn('slow');
$('.popup-overlay').height($(window).height());
return false;
});
$('#close').click(function () {
$('#popup').fadeOut('slow');
$('.popup-overlay').fadeOut('slow');
return false;
});
});
</script>
Acá la linea que llama a la funcion javascript:
<a href="#" id="open" runat="server">Login</a>
Alguna idea de qué estoy haciendo mal?