Jquery 以div覆盖层为中心_Jquery_Html

Jquery 以div覆盖层为中心

jquery html

Jquery 以div覆盖层为中心,jquery,html,Jquery,Html,我正试图将覆盖整个图像的div居中。我有一个jQuery脚本，它应该检查文档的大小（宽度和高度），划分它，并设置div的宽度。我认为应该把内容放在页面中间。 <head> <style type="text/css"> .boxWrapper{ min-width:640px; min-height:480px; margin-left:auto;

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


boxWrapper先生{
最小宽度：640px；
最小高度：480px；
左边距：自动；
右边距：自动；
垂直对齐：居中；
填充：15px 10px 10px 30px；
z指数：8；
}
.盒子{
左边距：自动；
右边距：自动；
垂直对齐：居中；
z指数：8；
}
.停电{
位置：绝对位置；
顶部：0px；
左：0px；
z指数：5；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,8）；
}
名称
描述
位置
期间
多洛·塞特·艾米特，奉献给我们的精英们。Fusce bibendum，利奥·农。
dr101
:60
Lorem ipsum dolor sit amet，献祭精英
dr101
:60
$（#tableBin a”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
var url=$（this.attr（“href”）；
var overlay=jQuery（“”）；
var left=“宽度：”+宽度（$document）/2+“px”；
var top=“hiight:+hiight（$document）/2+“px”；

$（“”）.text（data）.css（'width'，left.）.appendTo（'#boxWrapper'）；
$（“”）.text（data）.css（'height'，top.）.appendTo（'#boxWrapper'）；
overlay.appendTo（document.body）；
});


boxWrapper先生{
最小宽度：640px；
最小高度：480px；
文本对齐：居中；
z指数：8；
身高：100%；
}
.盒子{
z指数：8；
身高：100%；
}
.停电{
位置：绝对位置；
顶部：0px；
左：0px；
z指数：5；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,8）；
}
名称
描述
位置
期间
多洛·塞特·艾米特，奉献给我们的精英们。Fusce bibendum，利奥·农。
dr101
:60
Lorem ipsum dolor sit amet，献祭精英
dr101
:60
多洛·塞特·艾米特，奉献给我们的精英们。Fusce bibendum，利奥·农。
dr101
:60
$（#tableBin a”）。在（“单击”上，函数（e）
{
e、 预防默认值（）；
var url=$（this.attr（“href”）；
var top=“padding top:”+$（窗口）.height（）/2+“px”；
var overlay=jQuery（“”）；
$（“正文”）。附加（覆盖）；
});

不太需要jQuery。纯CSS

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

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

1）您需要使用

$（文档）.width（）

或

$（窗口）.width（）

，而不是

width（$（文档））

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

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

3）您试图将

boxWrapper

作为ID附加到

boxWrapper，但将boxWrapper
作为类使用：.appendTo（“#boxWrapper”）=>.appendTo（'.boxWrapper'）
4） 您正试图在添加到页面之前将其附加到boxWrapper
。要使用选择器，它必须存在于DOM中。您需要首先添加boxWrapper
，或者在boxWrapper
的HTML中添加数据
$("#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文本居中。我会将您的数据添加到div
中，然后使用文本对齐：居中
将其设置为100%宽度
$("#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');
});

演示：
将width（$document）
更改为-->$（document）。width（）进行了更改，但仍然不起作用。等等，我试试看。告诉我。。。在页面的中间应该出现什么元素？BOX包装器在框中。所以我假设，若boxWrapper居中，那个么boxWrapper将跟随它。如果不只是盒子。无论如何，我现在可能有一个太多的div。在span
元素上设置height
和width
将不起作用，除非它们设置为display:block没有解释的链接不是很好的答案。但即使是这样：所讨论的提琴也不会显示在页面上两个方向居中的div覆盖。
$('</span>').text(data).css({'left': left, 'top': top}).appendTo('#boxWrapper');

$("#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');
});

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