none
Div patalla completa RRS feed

  • Pregunta

  • Hola todos.

    Nota: Solo en Internet Explorer no me sirve

    Resulta que yo quiero mostrar un div que cubra toda la venta de mi pagina web y que este sobre todos los componentes, lo quiero asi, pxq deseo bloquear todos los componentes web debajo del div, mientras realizo otro proceso con mi pagina.

    Yo intente crear una hoja de estilo de la siguiente manera

    .boxMensajeBloqueo {
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	padding: 16px;
    	background: #fff;
    	color: #333;
    	overflow: auto;
    	background-color: #666; 
    	opacity: 0.3; 
    	filter: alpha(opacity=30);
    }
    
    
    El div si me cubre toda la pantalla, pero no me cubre si hay mas informacion en la pagina por debajo del scroll, osea el div cubre lo que yo veo, pero si bajo la barra el scroll de mi Internet Explorer, el div se corta y no me bloquea la demas información.

    Ahi es donde esta mi error, con Internet Explorer no me sirve, yo quiero que me cubra todo y hasta lo que estaba debajo del scroll

    Este es el HTML completo:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
        <title>CARTRACK</title>
        <style type="text/css">
    	.boxMensajeBloqueo {
    		position: fixed;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		padding: 16px;
    		background: #fff;
    		color: #333;
    		overflow: auto;
    		background-color: #666; 
    		opacity: 0.3; 
    		filter: alpha(opacity=30);
    	}
    	</style>
    </head>
    <body>
       dfdfd
       <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
       <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
       <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
       <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
       <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
       <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
        <div class="boxMensajeBloqueo">
            <p>
                Here is my div content!!</p>
        </div>
    </body>
    </html>
    

    Por si alguien me puede ayudar, por favor :)

     

    miércoles, 30 de noviembre de 2011 22:49

Respuestas

Todas las respuestas

  • hola, se me ocurre q puedes capturar el evento scroll de tu pagina y volver a asignar las proiedades height y width al div, con jquery seria sencillo:

    $(window).scroll(function(){
        $(".boxMensajeBloqueo ").css({height:'100%',width:'100%'});
    }
    


     


    Julio Avellaneda
    Core Group Comunidad BogotaDotNet
    MCP - MCC
    Blog !!

    jueves, 1 de diciembre de 2011 19:50
  • Podrías probar sacandole el scroll a la página mientras esté abierto el "boxMensajeBloqueo" con algo como

    html,body{ overflow:hidden;}

    o

     $(".boxMensajeBloqueo ").css({overflow: 'hidden'});
    viernes, 2 de diciembre de 2011 11:54
  • Hola gente, gracias a Julitogtu y p4bl1t0 por responderme.

    viendo las recomendaciones que me dieron con Jquery, me puse a buscar y opte por la siguiente solucion.

     

    http://jqueryui.com/demos/dialog/#modal-message

    es un compolente de Jquery que me puede bloquear todo el otro contenido, me sirvio en Internet Explorer, Mozilla y Crome

     

    Saludos

    • Marcado como respuesta Jose Elias martes, 6 de diciembre de 2011 16:37
    martes, 6 de diciembre de 2011 16:36