jQuery: div не появляется до второго клика?Я хочу это с первого раза.знак равно - PullRequest
2 голосов
/ 28 июля 2010

Первый клик: пустое 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>

CSS для floatymessoge:

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

Ответы [ 2 ]

1 голос
/ 28 июля 2010

связать событие click с jQuery

$(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."); 
    });
});
0 голосов
/ 28 июля 2010

В вашей логике с боксом пропущен шаг, если его еще нет в 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 вместо тега привязки, к которому нужно перейтиURL.

<span id="mine" onclick="floatymessage('msg');">run</span>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...