Bueno probando un poco, encontre que si quito el hidden del primer div me muestra el formulario...
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<title>:: jQuery AJAX para Consultas con PHP y MySQL ::</title>
<meta charset="utf-8" />
<link type="text/css" href="css/smoothness/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
<link type="text/css" href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="css/master.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery_ui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery_ui/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-validation-1.10.0/dist/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery-validation-1.10.0/lib/jquery.metadata.js"></script>
<script type="text/javascript" src="js/jquery-validation-1.10.0/localization/messages_es.js"></script>
</head>
<script type="text/javascript">
$(function(){
// creación de ventana con formulario con jquery ui
$('#agregarUser').dialog({
autoOpen: false,
modal:true,
width:305,
height:'auto',
resizable: false,
close:function(){
$('#formUsers fieldset > span').removeClass('error').empty();
$('#formUsers input[type="text"]').val('');
$('#formUsers select > option').removeAttr('selected');
}
});
// funcionalidad del botón que abre el formulario
$('#goNuevoUser').on('click',function(){
$('#agregarUser').dialog('open');
});
// Validar Formulario
$('#formUsers').validate({
submitHandler: function(){
var str = $('#formUsers').serialize();
alert(str);
return false;
},
errorPlacement: function(error, element) {
error.appendTo(element.prev("span").append());
}
});
});
</script>
<body>
<div id="agregarUser" Title="Agregar Usuario">
<form action="" method="post" id="formUsers" name="formUsers">
<fieldset id="ocultos">
<input type="hidden" id="usr_accion" name="usr_accion" class="{required:true}"/>
</fieldset>
<fieldset id="datosUser">
<p>Nombre</p>
<span></span>
<input type="text" id="usr_nombre" name="usr_nombre" placeholder="Nombre Completo" class="{required:true,maxlength:120} span3"/>
<p>Puesto</p>
<span></span>
<input type="text" id="usr_puesto" name="usr_puesto" placeholder="puesto que desempeña" class="{required:true,maxlength:80} span3"/>
<p>Nickname</p>
<span></span>
<input type="text" id="usr_nick" name="usr_nick" placeholder="nickname" class="{required:true,maxlength:25} span3"/>
<p>Status</p>
<span></span>
<select id="usr_status" name="usr_status" class="{required:true} span3">
<option value="">Seleccione Una Opción</option>
<option value="Activo">Activo</option>
<option value="Suspendido">suspendido</option>
</select>
<fieldset id="btnAgregar" style="text-align:center;">
<input type="submit" id="continuar" value="Continuar" />
</fieldset>
<fieldset id="ajaxLoader" class="ajaxLoader hide">
<img src="images/default-loader.gif">
<span>Espere un momento...</span>
</fieldset>
</form>
</div>
<div id="wraper">
<section id="content">
<div id="btnAddUser" class="center addUser">
<button id="goNuevoUser" class="btn btn-inverse btn-small"><i class="icon-plus"></i> Agregar Usuario</button>
</div>
<div id="listaOrganizadores">
<table id="listadoUsers" class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>Nombre</th>
<th>Puesto</th>
<th>Nickname</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Luis Fernando Cázares</td>
<td>Desarrollo y Sistemas</td>
<td>cazaresluis</td>
<td class="centerTXT"><span class="btn btn-success btn-mini">Activo</span></td>
<td class="centerTXT"><button class="btn btn-mini">Editar</button></td>
<tr>
<tr>
<td>Luis Fernando Cázares</td>
<td>Desarrollo y Sistemas</td>
<td>cazaresluis</td>
<td class="centerTXT"><span class="btn btn-warning btn-mini">Suspendido</span></td>
<td class="centerTXT"><button class="btn btn-mini">Editar</button></td>
<tr>
<tr>
<td>Luis Fernando Cázares</td>
<td>Desarrollo y Sistemas</td>
<td>cazaresluis</td>
<td class="centerTXT"><span class="btn btn-success btn-mini">Activo</span></td>
<td class="centerTXT"><button class="btn btn-mini">Editar</button></td>
<tr>
</tbody>
</table>
</div>
</section>
</div>
<footer>
Powered by Luis Fernando Cázares Bulbarela || 2012
</footer>
</body>
</html> Con ese codigo funciona la ventana emergente, ahora porque no me funciona la clase hidden de bootstrap y otra consulta, porque no aparece el icono de la x del tema smoothness de jquery, lo que me muestra con firebug es:
Código HTML:
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-id-1" class="ui-dialog-title">Registrarse</span>
<button class="ui-dialog-titlebar-close" type="button"></button>
</div>
Espero alguien pueda darme una mano.
Saludos.