1

幅と高さが100％固定されているdiv内でdiv（boxTest）を一元化しようとしています。

以下はコードで、これがjsfiddleです

html

 <a href="#" class="clickme">CLICK ME</a>

jQuery

 $( function() {
    $(".clickme").click(function() {
    $('body').append('<div class="videoMask" style="position:fixed; top:0; bottom:0; z-index:14000000; left:0; right:0; width:100%; height:100%; background-color:#000000;"></div><div id="boxTest" style=" width:150px; background:#FFFFFF; position:fixed; top:10px; z-index:15000000; height:150px; margin:0; padding:0;"><span class="closeMe">CLOSE</span></div>');
    $('#boxTest').show();   
 });

     $( ".closeMe, .videoMask" ).live('click', function() {
        $( "#boxTest" ).remove(); 
        $( ".videoMask" ).remove();  
     });   
 });

インラインスタイルが変更されます。ここで少し見やすくするために、このようにしました。

ご回答ありがとうございます。</ p>

4

3 に答える 3

1

このスタイルを#boxTestに適用して、水平方向の中央に配置してみてください...

#boxTest
{
    width:150px;
    position:absolute; /* OR FIXED IF THIS WORKS BETTER FOR YOU */
    margin-left:-75px;
    left:50%;
}
于 2012-12-12T14:36:42.313 に答える
0

このようなものがあなたにとってより役立つかもしれません。これは jQuery 内のコードの量が多すぎます。

$(function() {
  $(".clickme, .closeme").click(function() {
    $('.clickme').toggle();  
    $('.videoMask').toggle();  
  });
});

</p>

于 2012-12-12T13:59:53.920 に答える
0

パーセンテージで幅を持つ別の DIV 内に DIV を修正するのは困難です。CSS を次のように編集したところ、適切に中央揃えになっているようです。

http://jsfiddle.net/vYFxt/21/

CSS

.videoMask
{
    vertical-align:middle;
    z-index:14000000;
    width:500px;
    height:400px;
    background-color:#000;
    display:table-cell;
}

#boxTest
{
    width:150px;
    background:#FFF;
    z-index:15000000;
    height:150px;
    margin:auto;
}

JS

$(function() {
    $(".clickme").click(function() {
        $('body').append('<div class="videoMask"><div id="boxTest" ><span class="closeMe">CLOSE</span></div></div>');
        $('#boxTest').show();
    });

    $(".closeMe, .videoMask").live('click', function() {
        $("#boxTest").remove();
        $(".videoMask").remove();
    });
});​
于 2012-12-12T13:25:38.263 に答える