2011-11-17 19 views
15

En bootstrap css, es posible mostrar un diálogo modal, pero quiero poder hacerlo modal para que la interfaz de usuario detrás no responda, sin teniendo el fondo negro oscuro mostrado.bootstrap css: cómo hacer un diálogo modal modal sin afectar al fondo

Parece que no hay opciones que me permitan hacer esto en la función $ ("# selector"). Modal().

+1

Por favor, ¿podría enviar el código relevante como jsfiddle.net para nosotros ver y jugar con? Literalmente tomará unos segundos. –

+0

Gracias, aquí está el violín: http://jsfiddle.net/NUVrd/1/ – jaffa

Respuesta

8

para deshacerse del telón de fondo:

Después de la iniciación modal

$('#XXX').modal({show:true});

acaba de activar el código de abajo

$('.modal-backdrop').removeClass("modal-backdrop");  
+3

Mira la respuesta a continuación de Alex Marple para el enfoque ** correcto **. – FastTrack

0

Surey todo lo que necesita hacer es modificar el CSS para cambiar la opacidad del fondo negro. No tiene que ser visible para bloquear clics en elementos subyacentes (a menos que haya alguna protección de clickjacking que desconozco). La clase a apuntar es div.modal-backdrop.

+0

Acabo de probar esto y después de establecer la opacidad: 0 en ese elemento, todavía intercepta los clics. – Synchro

2

si estoy en lo correcto que debe ser capaz de hacer esto llamando a:

$("#selector").modal({ 
    backdrop: "static" 
}); 

entonces simplemente cambiar la CSS para la clase del telón de fondo y ya está.

82

añadir data-backdrop="false" a <div class="modal"> y Bootstrap hará el resto.

Ejemplo:

<div class="modal" id="genericModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false"> 
+7

Esta es la respuesta más limpia. Debería haber sido el aprobado. –

+0

Esta solución afecta el fondo. No es lo que ves, sino lo que haces clic. –

Cuestiones relacionadas