Question

首先点击：清空floatymessage div。第二次点击，之后：工作。

jQuery：

function floatymessage(message){
    var box = $j(".floatymessage")
    if (box.length == 0) {
        $j('body').append("<div class='floatymessage'></div>");
    }
    box.html(message);
    // center it
    box.css("left", ( $j(window).width() - box.width() ) / 2+$j(window).scrollLeft() + "px");
    box.fadeIn('slow');

    setTimeout(function(){$j('.floatymessage').fadeOut('slow');},3500);
}

链接：

<a href="#" onclick="floatymessage('Asking questions is not allowed.');"></a>

用于floatymessoge的css：

div.floatymessage {
    position: absolute;
    top: 20%;
    width: 300px;
    height: 50px;
    background: black;
    color: white;
    text-align: center;
    filter:alpha(opacity=75);
    -moz-opacity:0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
    box-shadow: 10px 10px 5px #000;
    border: 1px solid black;
    border-bottom-left-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    border-top-left-radius: 5px 5px;
    border-top-right-radius: 5px 5px;
    line-height: 50px;
    z-index: 10000;
    display: none;
}

Answer 1

使用jQuery绑定click事件

$(function() { // after the document is loaded
    $j("a#someId").click(function(e){ // when the anchor is clicked (give it an ID)
        e.preventDefault();
        floatymessage("Asking questions is not allowed."); 
    });
});

Answer 2

你的盒子逻辑错过了一个步骤，如果它不在dom中你需要将你的变量'box'设置为新的div：

if (box.length == 0) {
  box = $j("<div class='floatymessage'></div>");
  $j('body').append(box);
}

此外，

您可以使用已设置的方法，但在使用锚标记触发javascript事件时，您需要添加一个返回false以阻止它像普通链接一样处理它。

<a id="mine" href="#" onclick="floatymessage('msg');return false;">run</a>

在这种情况下绑定事件是一种更好的做法：

$j("#mine").click(function() { floatymessage('msg'); });

您可以使用span标记而不是想要导航到网址的锚标记来实现相同的效果。

<span id="mine" onclick="floatymessage('msg');">run</span>

jQuery：div直到第二次点击才出现？我想要第一个。 = \

2 个答案: