Así que me gustaría tener una ventana emergente en mi página. Me gustaría diseñarla con flexbox. Estoy usando scss para diseñar cosas y tengo mixins para las propiedades de flexbox.
El problema que encontré es que quiero que las propiedades de flexbox se apliquen a mi ventana emergente, como display: flex que tiene sus variantes de navegador:
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
Cuando intento cambiar css a display: none mi navegador lo anula display: -webkit-flex; así que "todavía no oculto mi elemento. Pensé en usar visibility pero ya que usa jquery .show y .hide con pantalla y sin visibilidad, parecía una herramienta equivocada.
Debería de alguna manera anular el jQuery .hide() ¿para cambiar también las otras propiedades de visualización o crear el elemento cada vez que quiera mostrarlo y luego eliminar el html después de enviarlo?
Tengo mi scss con este estilo de superposición de contenido:
.overlay-content {
/* this may or may not be here */
/* visibility: hidden; */
@include flex();
@include flex-direction(column);
@include flex-justify-content(flex-start);
}
Y tendría un código que se dispara cuando quiero mostrar mi ventana emergente:
$(".overlay-content").css("visibility: visible;");
$(".overlay-bg").css("visibility: visible;");
¿Está bien usar la propiedad de visibilidad css o debería usar siempre la propiedad de visualización para cambiar la visibilidad del elemento?
Lo que me molesta es que de esta manera no puedo usar el genial jquery.hide() opciones para la experiencia de usuario fresco
Respuestas
1 para la respuesta № 1Me he encontrado con el mismo problema y la solución que se me ocurrió puede que no sea la más elegante, pero cumple con su cometido.
Simplemente llamé .hide() En el código de inicialización del componente. jQuery agrega en línea display: none al elemento, y posterior llamada a .toggle() Lo elimina, así especificado en la hoja de estilo. display: flex entra en juego.