CSS & HTML & JQuery - Jak wyświetlić div OVER divy i ustawić dla nich zacienione tło

Potrzebuję czegoś takiego: kiedy klikam na jakiś link, cała strona musi stać się zacieniona i chcę wyświetlić nowy div (jak 200px X 200px) na środku strony, ponad inny div (więc nie "float").CSS & HTML & JQuery - Jak wyświetlić div OVER divy i ustawić dla nich zacienione tło

Np. Ułóż ten nowy element div na przy uldze, aby uniemożliwić dublowanie drugiego elementu div (backgound).

Jak mogę to zrobić? Myślę CSS powinien to zrobić i mam nadzieję, że moja prośba jest jasne :)

Dzięki

UPDATE (Dodano mój własny kod)

// HTML + Jquery 
<body> 
    <div class="contenitore"> 
     <div id="myBox" class="boxHidden"> 
      Box I Want To Display 
     </div> 

     <div class="contenitoreSite"> 
      <script type="text/javascript"> 
       $(document).ready(function() { 
        $(".articles").click(function() { 
         $('.contenitoreSite').fadeTo('fast', 0.5); 
         $('#myBox').removeClass().addClass('box'); 
         $('#myBox').fadeTo('fast', 1); 
        }); 
       }); 
      </script> 

      <a class="articles" href="#" onclick="return false;">Example</a> 
     </div> 
    </div> 
</body> 

// CSS 
.boxHidden{display:none;} 
.box{width:500px; height:500px; position:absolute; top:80px; left:240px; border:#000000 2px solid; background-color:#FF0000;} 
.contenitore{width:980px; margin:0 auto; position:relative;} 
.contenitoreSite{width:980px; margin:0 auto;}

Moi rzeczywiste problemy:

1 - Chcę umieścić całą stronę (oprócz ramki) z nieprzezroczystością. Ale dzięki tej funkcji każde dziecko otrzymuje wartość krycia 0,5. Jak mogę to naprawić? This jest jak pokazał w tej chwili.

2 - Czy ten atrybut to nieprzezroczystość w przeglądarce? Ponieważ czytam, że IE7 nie obsługuje go, ale z JQuery powinienem naprawić tego rodzaju problemy.

3 - Chciałbym, aby tło (zacienione) było niemożliwe do skasowania. Myślę, że jest możliwe, aby to zrobić ...

SOLVED

// HTML + Jquery 
<body> 
    <div class="contenitore"> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $(".articles").click(function() { 
        var maskHeight = $(document).height(); 
        var maskWidth = $(window).width(); 
        $('.mask').css({'width':maskWidth,'height':maskHeight}); 
        $('.mask').fadeIn(100); 
        $('.mask').fadeTo("fast",0.8); 

        var winH = $(window).height(); 
        var winW = $(window).width();   
        $("#myBox").removeClass().addClass('box');   
        $("#myBox").css('top', winH/2-$("#myBox").height()/2); 
        $("#myBox").css('left', winW/2-$("#myBox").width()/2); 
        $("#myBox").fadeIn(1000); 
       }); 
      }); 
     </script> 

     <div id="myBox" class="boxHidden"> 
      Box I Want To Display 
     </div> 

     <a class="articles" href="#" onclick="return false;">Example</a> 
    </div> 

    <div class="mask"></div>       
</body>  

// CSS 
.contenitore{width:980px; margin:0 auto; font-size:14px; color:#000000;} 
.boxHidden{display:none;} 
.box{width:500px; height:500px; position:absolute; z-index:9999; top:0px; left:0px; border:#000000 2px solid; background-color:#FF0000; display:none;} 
.mask {position:absolute; z-index:9000; top:0px; left:0px; background-color:#FFFFFF; display:none; }

Ta wersja powinna być cross-browser. Daj mi znać, co myślisz;)

Źródło

2010-12-18 markzzz

krycie nie jest cross browser. Non IE = 'nieprzezroczystość: 0.5 'IE =' filter: alpha (nieprzezroczystość = 50) ' – lnrbob

Tak, ale JQuery rozwiąże ten problem, myślę, że :) – markzzz

Wolę używać tła o dobrym charakterze i silnym włóknie moralnym. W przeszłości miałem tych złodziei, którzy mnie okradli. – Ben

rzeczywiście brzmi to tak, jakbyś potrzebował czegoś takiego jak fancybox lub lightbox.

Możesz to zrobić samodzielnie, używając javascript i css. Jeśli tworzysz okno "modalne", znajdziesz wiele wyników. Here jest przykładem z 20 wtyczkami i samouczkami do tworzenia takich modalnych okien.

Źródło

2010-12-18 15:18:29 Tim

Jeśli nie szukasz czegoś zbyt fantazyjne, i chcesz zrobić to po prostu spróbuj tego:

<body> 
    <your content> 
    <div id="shader"> 
     <div id="window"> 
      <window content> 
     </div> 
    </div> 
</body>

i dodać do CSS:

div#shader { 
    position: fixed; 
    top:0; 
    left:0; 
    background-image: url('gray70%opacity.png'); 
} 
div#window { 
    margin: auto; 
    background-color: white; 
    width: 200px; 
    height: 200px; 
}

Następnie wystarczy mieć funkcja javascript, która zmienia przezroczystość elementu div cieniowania. Jeśli użyjesz jQuery, to po prostu: $('div#shader').fadeIn('fast')

Źródło

2010-12-18 19:05:00 appi2012

Dla twojego drugiego problemu, chciałbym usunąć div twojej nakładki z rodzica i ustawić funkcję jQuery, aby zmniejszyć krycie pierwszego div i pokazać drugi, więc kod byłoby:

<div id="MainContent"> 
</div> 
<div id="overlay"> 
</div>

jQuery:

$('div#MainContent').fadeTo('fast', 0.5) 
$('div#overlay').fadeTo('fast', 1)

Źródło

2010-12-19 21:09:38 appi2012

CSS & HTML & JQuery - Jak wyświetlić div OVER divy i ustawić dla nich zacienione tło

Odpowiedz

Powiązane problemy