Question

我有这段代码：

function maintenance_text(e) {

var toop = 0;

    $('body')

    .before('<div class="maintenance_text" style="position: relative; top: '+toop+'px; left: 0px; right: 0px; z-index: 999999; background: black; color: white; font-size: 16px; cursor: default;">'+e+'</div>')

    .before(function() {

        $('.maintenance_text')
        .delay(3000)
        .fadeOut(function() {
            $(this).remove();
        });

    });

};

和这个工作代码：

<a href="#" onclick="javascript: maintenance_text('TEST'); return false;">Click here...</a>

并且所有作品都很棒，但我希望在修复此div时（不是相对的）获得此效果。但是当它被修复时，那么所有的消息都会被删除。是在一个位置，我想在prev信息下得到每条消息，比如相对位置。

我尝试添加toop var并在每次运行函数时添加10px，但我不知道该怎么做。

相对尝试： http://jsfiddle.net/IdolwSzutrab7/9zJvL/4/

编辑：我希望在所有消息消失时重置顶部位置，与此div相对时完全相同。

Answer 1

您需要在fixed周围创建一个maintenance_text包装器。然后使用相对定位将每个新div添加到它。

更新了HTML

<div id="wrapper" style="position: absolute; top: 20px; left: 20px; border: 1px solid black;"></div>
<br />
<br />
<br />
<a href="#" onclick="javascript: maintenance_text('TEST'); return false;">Click here...</a>

更新了JavaScript

$('#wrapper').before('<div class="maintenance_text" style="position: relative; top: '+toop+'px; left: 0px; right: 0px; z-index: 999999; background: black; color: white; font-size: 16px; cursor: default;">'+e+'</div>')

这是一个更新的jsfiddle。

http://jsfiddle.net/9zJvL/7/

Answer 2

试试这个

小提琴http://jsfiddle.net/harshdand/o727zwzf/

HTML

<div class="msg-container">
</div>
<br />
<br />
<br />
<a href="#" onclick="javascript: maintenance_text('TEST'); return false;">Click here...</a>
<div style="height:500px">
for other content
</div>

JS

  function maintenance_text(e) {
    $('.msg-container')

    .append('<div class="maintenance_text" style="left: 0px; right: 0px; background: black; color: white; font-size: 16px; cursor: default;">'+e+'</div>')

    .before(function() {

        $('.maintenance_text')
        .delay(3000)
        .fadeOut(function() {
            $(this).remove();
        });

    });

};

CSS

.maintenance_text{
    position:relative;
}

.msg-container{
    position:fixed;
    width:100%;
    top:0;
    z-index:100;
}

Answer 3

这可以满足您的需求：http://jsfiddle.net/9x0uau8s/

它使用其他.maintenance_text元素的高度来确定其位置应该在哪里。当你删除一个元素时，它会根据它的高度调整所有元素的位置。

例如......

var toop = 0; // Adding the element
$('.maintenance_text').map(function(i,e){toop+=$(e).height()});
$('<div>').addClass('maintenance_text').css({
    position: 'fixed',
    top: toop+'px'
}).fadeOut(function() { // Removing the element
    var t = $(this);
    t.nextAll('.maintenance_text').map(function(i,e){
        var o = $(e).offset();
        o.top=o.top-t.height();
        $(e).offset(o);
    });
    t.remove();
});

Answer 4

好的我自己做了，这里是测试的工作代码： http://jsfiddle.net/IdolwSzutrab7/9zJvL/

function maintenance_text(e, color) {

if (color == 'red') {
    color = 'rgba(255, 0, 0, 0.5)'
} else if (color == 'blue') {
    color = 'rgba(0, 102, 255, 0.5)'
} else {
    color = 'rgba(0, 0, 0, 0.9)'
};

    $('body')

    .append('<div id="maintenance_wrapper"></div>')

    .find('#maintenance_wrapper')

    .css({
        'position': 'fixed',
        'top': '0px',
        'left': '0px',
        'right': '0px',
        'z-index': '999999'

     })

    .append('<div class="maintenance_text" style="position: relative; top: 0px; left: 0px; right: 0px; background:'+color+'; padding: 3px; color: white; font-size: 16px; font-family: Arial; cursor: default; text-shadow: 1px 1px 1px black;">'+e+'</div>')

    .after(function() {

        $('.maintenance_text')
        .delay(3000)
        .fadeOut(function() {
            $(this).remove();
        });

    });

};

毕竟我决定在body之后添加这段代码，使用append。我还添加了颜色。

谢谢所有人的帮助！

单击时如何为var添加值？

4 个答案: