2010-09-22 10 views
5


Ho un div che sta creando tramite ajax, vorrei disabilitare tutto il corpo una volta che il div è popup e fino a quando il div non è chiuso.
È possibile in jQuery. Per favore fatemi sapere il vostro suggerimentocome disabilitare tutto il corpo tranne un div

Grazie,
Praveen Jayapal

+1

Suoni sospettosamente come un lightbox. cf. http://leandrovieira.com/projects/jquery/lightbox/ – annakata

risposta

9

che si desidera rimuovere, o nascondere il corpo? Tecnicamente questo non dovrebbe essere possibile perché è necessario aggiungere il div al corpo per vederlo. Quello che potresti fare è creare un livello "maschera" che copra tutto il corpo, quindi usa lo z-index per il tuo div per visualizzarlo sulla parte superiore del corpo.

Qualcosa di simile:

http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

potrebbe aiutare!

Per nascondere della pagina tutto quello che avrebbe bisogno di fare è di cambiare linea 21:

$('#mask').fadeTo("slow",0.8);

in javascript per:

$('#mask').fadeTo("slow",1);

e il colore della maschera la riga 7 del CSS può essere modificata in qualsiasi cosa tu voglia:

background-color: #000;

+0

esattamente questo è quello che mi serve :) .. grazie amico – praveenjayapal

6

Questo dovrebbe fare il trucco ..

HTML:

<body> 
    <div id="overlay"> 
     this is above the body! 
    </div> 
<!--...rest...--> 
</body> 

CSS:

#overlay { 
    background-color: #ccc; /*or semitransparent image*/ 
    display: none; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 100; 
} 
#ajax-div { 
    z-index: 200; /*important, that it is above the overlay*/ 
} 

Javascript:

<script type="text/javascript"> 
$(document).ready(function() { 
    //your ajax-call 
    $.ajax({ 
     //on success 
     success: function() { 
      //your logic your showing the ajax-div 
      $('#overlay').show(); //or fadeIn() 
     } 
    }) 

    //use live to catch the close-click of the later added ajax-div 
    $('#ajax-div a#close').live('click', function() { 
     //close the ajax-div 
     $(this).parent().hide(); 
     //close the overlay 
     $('#overlay').hide(); //or, again, fadeOut() 
    }); 
}); 
</script> 
+0

A per lo sforzo lì Tim! Bravo. – roborourke

1

OK ... l'idea migliore è usare jquey.ui se usi jquery.

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

È possibile scegliere tema e scaricare solo i componenti che ti piace ..

Quindi includere solo js e css una cartella di img di posto e una finestra di dialogo di chiamata. È tranquillo facile ...

Problemi correlati