dialog

=jQuery UI DIALOG=
 * http://jqueryui.com/demos/dialog/

Hay dos maneras de abrir un diálogo modal (popup que impide actuar excepto en el popup) En este ejemplo se muestran los dos: code format="html4strict" Modal Pop Up    $(document).ready(function  {        $("#dialog-form").dialog({ autoOpen: false, height: 300, width: 350, modal: true });   });
 * Javascript >> abre una página web
 * jQuery UI >> retoca un div dentro d ela misma página



Modal javaScript

contenido Modal code


 * el formato CSS es el de el jQuery UI escogido. pero se puede sobreescribir.

El div queda transformado en un popup modal con la siguiente estructura code format="html4strict" Dialog title  close   One content
 * se pueden modificar los CSS de cada div correspondiente

code

Opciones
code format="css" .ui-dialog-titlebar {   display: none; } code
 * Sin título**

=Ejemplo de Dialog con formulario y validaciones=



code format="html4strict" $(document).ready(function {        $("#dialog-form").dialog({ autoOpen: false, height: 300, width: 350, modal: true }).parent.appendTo("form");       jQuery("#cmdCancelar").click(function  { jQuery('#dialog-form').dialog("close"); });        jQuery("#cmdOpen")            .button            .click(function  { $("#txt1").val(""); $("#lst1").get(0).selectedIndex = 0; $("#dialog-form").dialog("open"); $("#txt1").focus; });   });

 textbox: 



combo:  -select- uno dos</asp:ListItem> </asp:DropDownList> <asp:RequiredFieldValidator Text="*" EnableClientScript="true" ID="vldlst" runat="server" ErrorMessage="" ControlToValidate="lst1" InitialValue="0" ForeColor="Red" ></asp:RequiredFieldValidator>

<asp:Button ID="cmdAceptar" runat="server" Text="aceptar" onclick="cmdAceptar_Click" /> <input type="button" id="cmdCancelar" value="Cancelar" />

<input type="button" id="cmdOpen" value="Open" /> <asp:Label ID="lblResult" runat="server"></asp:Label> code code format="csharp" protected void cmdAceptar_Click(object sender, EventArgs e)   { lblResult.Text = txt1.Text + " " + lst1.SelectedValue; txt1.Text = ""; lst1.SelectedIndex = 0; } code

Observaciones
 * se reinicializan el textbox y el dropdownlist al abrir el diálogo
 * con parent.AppendTo asociamos el formulario al diálogo (sino se pone no hace Post)
 * se usan los validadores de ASP.NET y funcionan tanto en Cliente como en Servidor
 * si hay mas de un form, debe indicarse dentro de cual de ellos (por ejemplo #mainForm) se pondrá.
 * A tener en cuenta que se realiza un PostBack de toda la página, como si fuera un botón de la página.