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

Question

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

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

就像穿上这件新的div 救济和渲染其他分区(backgound)无法点击.

我该怎么做？我认为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;}

Run Code Online (Sandbox Code Playgroud)

我的实际问题:

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Tim*_*Tim 4

实际上，听起来您需要类似fancybox或lightbox的东西。

您可以使用 javascript 和 css 自行完成此操作。如果你用谷歌搜索“创建模态窗口”，你会发现很多结果。下面是一个包含 20 个插件和教程的示例，用于创建此类模态窗口。

归档时间：	15 年，2 月前
查看次数：	12985 次
最近记录：	15 年，2 月前