0

我正在尝试将覆盖整个图像的 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>

4

3 回答 3

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;
    }
于 2012-04-25T18:49:15.107 回答
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>​
于 2012-04-25T18:46:26.037 回答
0

如果您只是想要一些文本在视频下方居中，则不需要使用 jQuery 进行定位。另外，您的代码存在许多问题：

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

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

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

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

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

3）你试图追加到boxWrapper一个ID，但你正在使用boxWrapper作为一个类：.appendTo('#boxWrapper');=>.appendTo('.boxWrapper');

4）您试图在将boxWrapper其添加到页面之前附加到。要使用选择器，它必须存在于 DOM 中。您需要添加第boxWrapper一个，或者在 .html 的 HTML 中添加数据boxWrapper。

话虽如此，如果您的数据确实是隐含的文本，请使用 CSS 文本居中。我会将您的数据添加到 adiv中，然后将其设置为 100% 宽度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');
});

CSS：

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

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

于 2012-04-25T19:15:11.360 回答