CSS＆HTML＆JQuery - 如何在其他div上顯示div並將其設置爲陰影背景

我需要這樣的一些東西：當我點擊某個鏈接時，整個頁面必須變爲陰影，並且我想要顯示一個新的div（如200px X 200px）在頁面中心，以上其他div（所以不是「float」）。CSS＆HTML＆JQuery - 如何在其他div上顯示div並將其設置爲陰影背景

就像把這個新的div在救濟並渲染其他div（背景）不可點擊。

我該怎麼辦？我認爲CSS應該這樣做，我希望我的要求是明確的:)

感謝

UPDATE（由我自己的代碼）

// 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;}

我的實際問題：

1 - 我想把整個頁面（除了框）放在不透明的地方。但是通過這個功能，每個孩子都可以得到不透明度0.5的值。我怎樣才能解決這個問題？它現在是如何顯示的。

2 - 此屬性不透明跨瀏覽器？因爲我讀過IE7不支持它，但是用JQuery我應該修復這些類型的問題。

3 - 我想使背景（陰影部分）不可點擊。我認爲這是有可能做到這一點...

解決

// 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; }

這個版本應該是跨瀏覽器。讓我知道你是怎麼想的;）

來源

2010-12-18 markzzz

透明度不跨瀏覽器。非IE ='不透明度：0。5'IE ='filter：alpha（opacity = 50）' – lnrbob 2010-12-19 16:05:10

是的，但JQuery將解決這個問題，我認爲:) – markzzz 2010-12-19 16:07:42

我更喜歡使用良好的性格和強烈的道德纖維的背景。過去我曾偷過我的黑幕。 – Ben 2013-06-05 08:12:11

實際上它聽起來像你需要像fancybox或lightbox之類的東西。

你可以使用javascript和css自己做到這一點。如果你谷歌'創建模態窗口'，你會發現很多結果。 Here是一個20個插件和教程用於創建這種模式窗口的例子。

來源

2010-12-18 15:18:29 Tim

如果你不尋找的東西太花哨，並希望這樣做只是試試這個：

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

這增加了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; 
}

然後，只是有一個javascript函數可以改變着色器div的不透明度。如果你使用jQuery，它簡單地說：$('div#shader').fadeIn('fast')

來源

2010-12-18 19:05:00 appi2012

對於你的第二個問題，我會從父一個刪除您覆蓋DIV，並設置你的jQuery函數既降低第一個div的不透明度，並顯示第二個，所以該代碼將是：

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

的jQuery：

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

來源

2010-12-19 21:09:38 appi2012

CSS＆HTML＆JQuery - 如何在其他div上顯示div並將其設置爲陰影背景

回答

相關問題