Encontré una gran cantidad de plugins de ventanas modales, intenté con diferentes opciones de configuración para algunos como SimpleModal, LightBox ... estos son livianos y tienen una configuración flexible, pero me falta una cosa: necesito poder desplazar la ventana modal (cuando exceder en altura) con la barra de desplazamiento del navegador como la galería de facebook modal, o pinterest.com pin vista previa modal, ¿alguna sugerencia?Dónde encontrar jQuery plugin de ventana modal "desplazable"?
Respuesta
$(window).scroll(function(){
if($('#ux-dialog-test-container').dialog('isOpen') === true){
var dialogHeight = $('.ui-dialog').height();
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var scrollLength = documentHeight - windowHeight;
var currentScrollTop = $(window).scrollTop();
var scrollPercentage = currentScrollTop/scrollLength;
var pixelsToSubtract = dialogHeight * scrollPercentage;
var newTop = 32 - pixelsToSubtract;
$('.ui-dialog').animate({top: newTop + 'px'}, 15, 'swing');
}
});
Sé que esto una vieja pregunta, pero yo estaba luchando con el mismo problema y encontramos este una solución adecuada. Básicamente, da la ilusión de desplazarse por el diálogo modal, cuando en realidad está empujando la parte superior más alta a medida que se desplaza hacia abajo. Calculé el porcentaje de ventana desplazada y usé ese porcentaje para ajustar la propiedad "css:" superior. En mi caso, tuve la parte superior configurada en 32px, como pueden ver, ajusté en mis cálculos. Espero que esto ayude a alguien en alguna parte!
OH! y esto lo que le robé a otro hilo es necesaria en ciertos navegadores para desbloquear el desplazamiento (es decir, en cromo el evento click de la barra de desplazamiento se suprime si modal: true)
if ($.ui && $.ui.dialog) {
$.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' ');
}
Sé que esto funciona en IE8 +, así como Chrome y FF.
EDITAR: Se agregó una marca para ver si el diálogo estaba abierto.
- 1. jQuery ejemplo de ventana modal?
- 2. Stackoverflow como ventana emergente modal en jquery
- 3. ¿Dónde puedo encontrar un buen plugin de sombra jQuery?
- 4. jQuery ventana modal elimina elementos de mi formulario
- 5. (Capybara) ventana modal de acceso
- 6. jQuery desplazable, ordenable, tabla filtrable
- 7. Abrir una ventana emergente modal
- 8. Error de Javascript al intentar abrir una ventana modal en una ventana modal
- 9. jQuery UI modal Tutorial
- 10. ¿Dónde encontrar una lista de todos los eventos jQuery?
- 11. jquery diálogo modal onclick?
- 12. Jquery dialog modal not closing
- 13. JQuery TextArea AutoGrow Plugin
- 14. ¿Cómo cerrar un modal haciendo clic fuera de la ventana modal?
- 15. Jquery-ui desplazable en desplazamiento vertical solo
- 16. jquery ui desplazable arrastrando dentro del contenedor
- 17. abrir la ventana modal de iframe en el elemento primario
- 18. ShowDialog() no hace que la ventana modal
- 19. Bootstrap.js: ¿cómo mostrar automáticamente una ventana modal?
- 20. Creando una ventana modal win32 con CreateWindow
- 21. bxslider jQuery plugin de
- 22. UI.Layout jquery plugin
- 23. ¿Se puede personalizar la ventana modal de Wicket?
- 24. Crear una ventana modal para cargar datos con AngularJS
- 25. jQuery diálogo modal y jqGrid
- 26. Cambiar la ventana modal de jquery-ui color/efecto de imagen/superposición
- 27. ¿La mejor opción para la ventana emergente modal en ASP.NET?
- 28. Cómo crear una ventana modal en JavaFX 2.1
- 29. jQuery Plugin Namespace
- 30. jQuery Plugin Historia
No, esto no es exactamente lo que estoy buscando ... Necesito poder desplazarme por la ventana modal con la barra de desplazamiento vertical del navegador, para no tener contenido desplazable dentro de esta ventana modal. –