居中div叠加

时间：2012-04-25 18:43:51

标签： jquery html

我正试图将一个覆盖整个图像的div居中。我有一个jQuery脚本，可以检查文档的大小（宽度和高度），除以它，并设置div的宽度。我认为应该将内容集中在页面中间。

<head>  
    <style type="text/css">
        .boxWrapper{
            min-width:640px;
            min-height:480px;
            margin-left:auto;
            margin-right:auto;
            vertical-align:center;
            padding: 15px 10px 10px 30px;
            z-index:8;
        }
        .box {
            margin-left:auto;
            margin-right:auto;
            vertical-align:center;
            z-index:8;
        }
        .blackOut {
            position: absolute;
            top:0px;
            left:0px;
            z-index: 5;
            width:100%;
            height:100%; 
            background-color: rgba(0,0,0,.8);
        }
    </style>
</head>
<body bgcolor="#DCDCDC">
    <div class="pageWrapper">   
    <div class="binShadow">
        <div class="bin">       
            <table id="tableBin" border="0">
                <tr>
                    <th>name</th>
                    <th>description</th>
                    <th>location</th>
                    <th>duration</th>
                </tr>
                <tbody>
                    <tr>
                        <td><a href='A001C010_111129_R1VL.mov'>A001C010_111129_R1VL.mov</a></td>
                        <td>dolor sit amet, consectetur adipiscing elit. Fusce bibendum, leo non.</td>
                        <td>dr101</td>
                        <td>:60</td>
                    </tr>
                    <tr>
                        <td><a href="A001C011_111129_R1VL.mov">A001C011_111129_R1VL.mov</a></td>
                        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
                        <td>dr101</td>
                        <td>:60</td>
                    </tr>
                </tbody>
                </div>
            </table>
        </div>
    </div>  
</div>
<script>
    $("#tableBin a").on("click", function(e) {
     e.preventDefault();
     var url = $(this).attr("href");
     var overlay = jQuery('<div class="blackOut"><div class="boxWrapper"><div class="box"><video src="'+url+'" /></video></div></div></div>');
     var left = "width:"+width($document)/2+"px";
     var top = "hieght:"+hieght($document)/2+"px";
     ​
     $('</span>').text(data).css('width', left).appendTo('#boxWrapper');
     $('</span>').text(data).css('height', top).appendTo('#boxWrapper');
     overlay.appendTo(document.body);

    });
</script>

3 个答案:

答案 0 :(得分：1)

不需要jQuery。纯CSS。

http://jsbin.com/ebuyet/edit#javascript,html,live

jQuery：

$("#tableBin a").on("click", function(e){
     e.preventDefault();

     var url = $(this).attr("href");
     var overlay = '<div class="blackOut"> <span class="boxWrapper"> <div class="box">  <video src='+url+'></video>  </div></span></div>';

     $('body').append(overlay);
     $('.blackOut').stop().fadeTo(1000,1); // fadeIn after is appended
});

CSS：

    .blackOut {
        position: absolute;

        top:0px;
        left:0px;
        z-index: 5;
        width:100%;
        height:100%; 
        background-color: rgba(0,0,0,.8);
        text-align:center;
    }
     span.boxWrapper{
display:block;
        width:640px;
        height:480px;
margin:0 auto;
        padding: 15px 10px 10px 30px;
        z-index:8;
        background:#eee;
    }
    .box {
        margin-left:auto;
        margin-right:auto;
        vertical-align:center;
        z-index:8;
    }

答案 1 :(得分：0)

http://jsfiddle.net/spw6K/53/ 

<head>  
    <style type="text/css">
        .boxWrapper{
            min-width:640px;
            min-height:480px;
            text-align:center;
            z-index:8;
            height:100%;
        }
        .box {
            z-index:8;
            height:100%;
        }
        .blackOut {
            position: absolute;
            top:0px;
            left:0px;
            z-index: 5;
            width:100%;
            height:100%; 
            background-color: rgba(0,0,0,.8);
        }
    </style>
</head>

<body bgcolor="#DCDCDC">
    <div class="pageWrapper">

    <div class="binShadow">
        <div class="bin">       
            <table id="tableBin" border="0">
                <tr>
                    <th>name</th>
                    <th>description</th>
                    <th>location</th>
                    <th>duration</th>
                </tr>
                <tbody>
                    <tr>
                        <td><a href='A001C010_111129_R1VL.mov'>A001C010_111129_R1VL.mov</a></td>
                        <td>dolor sit amet, consectetur adipiscing elit. Fusce bibendum, leo non.</td>
                        <td>dr101</td>
                        <td>:60</td>
                    </tr>
                    <tr>
                        <td><a href="A001C011_111129_R1VL.mov">A001C011_111129_R1VL.mov</a></td>
                        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
                        <td>dr101</td>
                        <td>:60</td>
                    </tr>
                    <tr>
                        <td><a href="A001C012_111129_R1VL.mov">A001C012_111129_R1VL.mov</a></td>
                        <td>dolor sit amet, consectetur adipiscing elit. Fusce bibendum, leo non.</td>
                        <td>dr101</td>
                        <td>:60</td>
                    </tr>
                </tbody>
                </div>
            </table>
        </div>
    </div>  
</div>
<script>
    $("#tableBin a").on("click", function(e)
    {
        e.preventDefault();

        var url = $(this).attr("href");
        var top = "padding-top:" + $(window).height() / 2 + "px";

        var overlay = jQuery('<div class="blackOut"><div class="boxWrapper"><div class="box" style="' + top + '"><video class="videoBox" src="'+url+'"/></div></div></div>');

        $("body").append( overlay );
    });
</script>​

答案 2 :(得分：0)

如果您只想在视频下方居中显示某些文字，则无需使用jQuery进行定位。此外，您的代码存在许多问题：

1）您需要使用$(document).width()或$(window).width()，而不是width($(document))

2）您似乎两次添加相同的数据：

$('</span>').text(data).css('width', left).appendTo('#boxWrapper');
$('</span>').text(data).css('height', top).appendTo('#boxWrapper');

这增加了两个跨度。我想你想要一个具有两个css属性的跨度（如果你正在定位，你应该使用top和left，而不是height / width：

$('</span>').text(data).css({'left': left, 'top': top}).appendTo('#boxWrapper');

3）您尝试将boxWrapper作为ID附加，但您使用boxWrapper作为课程：.appendTo('#boxWrapper'); =＆gt; .appendTo('.boxWrapper');

4）您尝试在将boxWrapper添加到页面之前附加到boxWrapper。要使用选择器，它必须存在于DOM中。您需要先添加boxWrapper，或在div的HTML中添加数据。

话虽如此，如果您的数据是真实的文本，请使用CSS文本居中。我会在text-align: center中添加您的数据，然后使用$("#tableBin a").on("click", function(e) { e.preventDefault(); var url = $(this).attr("href"); var overlay = $('<div class="blackOut"><div class="boxWrapper"><div class="box video">Video Here: '+url+'</div></div></div>'); // You need to add the overlay to your DOM before you can append your data to it overlay.appendTo('body'); // Now you can append your data to the boxWrapper $('<div class="data">').text("This is where your data would go").appendTo('.boxWrapper'); }); 将其设置为100％宽度。

.data {
   width: 100%;
   text-align: center;   
}

CSS：

{{1}}

演示：http://jsfiddle.net/jtbowden/Ead7r/2/

相关问题
最新问题