fade in fade out DIV

[ALLisCHAOS]

Καλησπέρα παιδιά, έχω ένα site(bootstrap) και θέλω να του βάλω κάτι extra λειτουργίες, μια από αυτές είναι όταν πατίεται ένα κουμπί να γίνεται fade in ένα div και ταυτόχρονα να σκουραίνουν τα πάντα πίσω του, σαν να γίνεται focus όλο το site επάνω σε αυτό το DIV (πχ πατάς το login button εμφανίζεται το div με τη φόρμα του login και τα απο γύρω να σκουραίνουν δίνωντας την εντύπωση ότι πήγαν στο βάθος).
Με ποιόν τρόπο μπορώ να πετύχω κάτι τέτοιο? Το fade in/out το πετυχαίνω με αυτό:

<script>
    $(function() {
    	$('#div').addClass('hidden').hide();
    	$('#button').click(function() {
        	if ($('#div').hasClass('hidden')) {
            		$('#div').removeClass('hidden').fadeIn(1000);
        	}
        	else {
            	        $('#div').addClass('hidden').fadeOut(1000);
        	}
    	});
    });
</script>

αλλά πως θα κάνω να 'σκουραίνει'/΄βαθαίνει΄ το υπόλοιπο site?

[defacer]

Θα βάλεις ένα div κατευθείαν κάτω από το body (δεν έχει σημασία πού, τυπικά αυτό το div δημιουργείται δυναμικά και μπαίνει σαν τελευταίο child) και θα του δώσεις

 

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: black;
  opacity: .4;  /* παίζεις με το νούμερο, 0 = διαφανές, 1 = κατάμαυρο */

Μπορεί να χρειαστεί να παίξεις με το z-index ανάλογα τι κάνεις στη σελίδα σου, π.χ. πιθανόν χωρίς άλλες αλλαγές να κάτσει πάνω από το #div σου πράγμα που δε θες. Οπότε θα δώσεις στο δικό σου μεγαλύτερο z-index.

[doctor_667]

Στο bootstrap υπάρχει έτοιμο αυτό που θες και λέγεται modal. Κοίτα το να δεις αν σου κάνει. 

[ALLisCHAOS]

@Defacer thanks για τον css way, δεν είχα ιδέα ότι υπήρχε το modal που είπε ο @doctor_667
Thanks both of you