2015-03-02 17 views
0

Я просто хочу сказать пользователю, что следующая операция (щелчок по ссылке) займет некоторое время ... (чтобы не перезагружать страницу и не нажимать снова на ссылка).Как показать сообщение (DOM), прежде чем следовать по ссылке

Я пробовал:

<p id="message" style="display:none" class="notification">This could take a while, please sit down and relax</p> 

<script> 
    $(document).ready(function() { 
     $("a").click(function() { 
     $("#message").show(); 
     }); 
    }); 
</script> 

но сообщение, не обнаруживался. Щелчок прошел, как ожидалось.

+0

использования $ ("# сообщение") стиль ('дисплей', 'блок'); чтобы показать сообщение .. – Lucky

+0

Если «следующей операции потребуется некоторое время», скорее всего, лучше выполнить (возможный асинхронный Ajax) запрос «POST», дождаться результата успеха, а затем перенаправить пользователя. – haim770

+0

Возможно, что-то вроде этого: 'window.onbeforeunload = function (e) { $ (" # message "). Show(); } '- хотя я не совсем уверен, что займет некоторое время. :) – sideroxylon

ответ

1

$(function() { 
 
    $("a").click(function() { 
 
    $("#message").stop(true, true).show(250); 
 
    $("#message").delay(2000).hide(250); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href = "#">test foo link</a> 
 
<p id="message" style="display:none" class="notification">This could take a while, please sit down and relax</p>

Что-то вроде этого?

+0

Нет, проблема в том, что я действительно хочу следовать ссылке, и как только браузер увидит это, она больше не отображает никаких изменений в дереве DOM. – Johan

0

Чтобы сделать его более кросс-браузер (Safari, Chrome дал проблемы), используя еще одно событие лучше:

<script> 
    $(document).ready(function() { 
     $("a").on("mousedown", function(e) { 
     $("#message").show(); 
     }); 
    }); 
</script> 

работает как шарм. Конечно, они могут выйти из ссылки при отпускании мыши, но при помощи мыши вы получите те же проблемы, что и при нажатии. .

, если вы действительно хотите это 100%, вы можете скрыть сообщение о MouseUp на уровне документа:

<script> 
    $(document).ready(function() { 
     $("a").on("mousedown", function(e) { 
     $("#message").show(); 
     }); 
     $(document).on("mouseup", function(){ 
     $("#message").hide(); 
     }); 
    }); 
</script> 
Смежные вопросы