CSS＆HTML＆JQuery - 如何在其他div上显示div并将其设置为阴影背景

Question

I need somethings like this : when i click on some link, the whole page must become as shady, and i want to display a new div (like 200px X 200px) in the center of the page, over other div (so not "float"). 我需要这样的事情：当我点击一些链接时，整个页面必须变得阴暗，我想在页面的中心显示一个新的div（如200px X 200px），而不是其他div（所以不是“浮动” “）。

Like put this new div on relief and render the other div (backgound) unclickable. 就像穿上救济这一新的div和渲染其他分区（backgound）无法点击。

How can I do it? 我该怎么做？ I think CSS should do it, and I hope my request is clear :) 我认为CSS应该这样做，我希望我的要求是明确的:)

Thanks 谢谢

UPDATE (Added my own code) 更新（添加了我自己的代码）

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

My actual problems : 我的实际问题：

1 - I Want to put the whole page (except the box) with opacity. 1 - 我想把整个页面（盒子除外）用不透明度。 But with this function, each child get the opacity 0.5 value. 但是使用此功能，每个孩子都获得不透明度0.5值。 How can I fix this? 我怎样才能解决这个问题？ This is how its showed at the moment. 这就是它目前的表现。

2 - Is this attribute opacity cross-browser? 2 - 此属性是不透明的跨浏览器吗？ Because i read that IE7 doesnt support it, but with JQuery I should fix these kinds of problems. 因为我读到IE7不支持它，但是使用JQuery我应该解决这些问题。

3 - I would like to put the background (the shady one) unclickable. 3 - 我想把背景（阴暗的）无法点击。 I think is possible to do this... 我想有可能做到这一点......

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

This version should be cross-browser. 这个版本应该是跨浏览器的。 Let me know what do you think ;) 让我知道你的想法;）

Answer 1

actually it sounds like you need something like fancybox or lightbox . 实际上听起来你需要像fancybox或lightbox这样的东西。

You can do this yourself by using javascript and css. 您可以使用javascript和css自己完成此操作。 If you google 'creating modal window' you find a lot of results. 如果你谷歌'创建模态窗口'你会发现很多结果。 Here is an example with 20 plugins and tutorials for creating such modal windows. 这是一个包含20个插件和教程的示例，用于创建此类模态窗口。

Answer 2

If you're not looking for something too fancy, and want to do it simply try this: 如果您不想寻找太过花哨的东西，并且想要这样做，只需尝试：

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

And add this to the CSS: 并将其添加到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;
}

Then, just have a javascript function that changes the opacity of the shader div. 然后，只需要一个javascript函数来改变着色器div的不透明度。 If you use jQuery, its simply: $('div#shader').fadeIn('fast') 如果你使用jQuery，它只是： $('div#shader').fadeIn('fast')

Answer 3

For your second problem, I would remove the your overlay div from the parent one, and set your jQuery function to both lower the opacity of the first div and show the second, so the code would be: 对于你的第二个问题，我将从父项删除你的overlay div，并设置你的jQuery函数既降低第一个div的不透明度又显示第二个，所以代码将是：

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

jQuery: jQuery的：

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

CSS＆HTML＆JQuery - 如何在其他div上显示div并将其设置为阴影背景

问题描述

3 个解决方案

解决方案1
4 已采纳 2010-12-18 15:18:29

解决方案2
2 2010-12-18 19:05:00

解决方案3
1 2010-12-19 21:09:38

CSS＆HTML＆JQuery - 如何在其他div上显示div并将其设置为阴影背景

问题描述

3 个解决方案

解决方案1 4 已采纳 2010-12-18 15:18:29

解决方案2 2 2010-12-18 19:05:00

解决方案3 1 2010-12-19 21:09:38

解决方案1
4 已采纳 2010-12-18 15:18:29

解决方案2
2 2010-12-18 19:05:00

解决方案3
1 2010-12-19 21:09:38