0

画像全体をオーバーレイするdivを中央に配置しようとしています。ドキュメントのサイズ（幅と高さ）をチェックし、それを分割し、divの幅を設定することを想定したjQueryスクリプトがあります。これは、コンテンツをページの中央に配置する必要があると思います。

<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 を使用する必要はありません。さらに、コードにいくつかの問題がありました。

$(document).width()1)または$(window).width()を使用する必要があります。width($(document))

2) 同じデータを 2 回追加しているようです:

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

これにより、2 つのスパンが追加されます。両方のcss属性を持つ1つのスパンが必要だと思います（そして、配置する場合は/ではなくtopandを使用する必要があります：leftheightwidth

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

boxWrapper3) ID として追加しようとしていますがboxWrapper、クラスとして使用しています: .appendTo('#boxWrapper');=>.appendTo('.boxWrapper');

4)boxWrapperページに追加される前に追加しようとしています。セレクターを使用するには、DOM に存在する必要があります。boxWrapper最初に追加するか、 の HTML にデータを追加する必要がありますboxWrapper。

そうは言っても、暗示されているようにデータが本当にテキストである場合は、CSS テキストのセンタリングを使用してください。データを に追加し、divで 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 に答える