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

我需要这样的事情：当我点击一些链接时,整个页面必须变得阴暗,我想在页面的中心显示一个新的div(如200px X 200px),而不是其他div(所以不是“浮动” “).

就像把这个新的div放在一边,让另一个div(背景)无法点击.

我该怎么做？我认为CSS应该这样做,我希望我的要求是明确的:)

谢谢

更新(添加了我自己的代码)

// 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值.我怎样才能解决这个问题？ This是它现在的表现.

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

这个版本应该是跨浏览器的.让我知道你的想法;)

解决方法

实际上听起来你需要像 fancybox或 lightbox这样的东西.

您可以使用javascript和css自己完成此操作.如果你谷歌’创建模态窗口’你会发现很多结果. Here是一个包含20个插件和教程的示例,用于创建此类模态窗口.

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

解决方法

猜你在找的CSS相关文章