使用Ajax / Javascript按钮按下通知弹出窗口?

时间:2014-07-23 05:51:13

标签: javascript jquery html css ajax

我目前正在制作一个包含通知的网站,但我不太确定如何在按下按钮时显示它们。类似于"显示天气"将在底部的某个角落显示通知。

http://i.stack.imgur.com/v8pEd.png

它有多难?它真的可能吗?

4 个答案:

答案 0 :(得分:2)

以下是单击按钮显示天气的示例。使用此插件--- http://simpleweatherjs.com/

<强> HTML

<div id="weather"></div>
<input type="submit" id="Show" value="Current Weather" />

<强> JQUERY

// Docs at http://simpleweatherjs.com
$(document).ready(function() {

    $("#weather").hide();

  $.simpleWeather({
    location: 'Nicosia, CY',
    woeid: '',
    unit: 'f',
    success: function(weather) {
      html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li class="currently">'+weather.currently+'</li>';
      html += '<li>'+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul>';

      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});

$("#Show").click(function(){
  $("#weather").show();
});

<强>样本

http://jsfiddle.net/LW3S9/4/

这里是使用Jquery UI弹出的演示。

http://jsfiddle.net/LW3S9/5/

所以你需要点击功能,如果使用插件,那么就像天气一样特殊。

答案 1 :(得分:0)

可以显示。

使用click()按钮按下事件。

$("button_reference").click(function(){
   // do your notification-related stuff here
});

答案 2 :(得分:0)

您可以使用click事件来显示弹出窗口,如果您需要以某种动画方式进行通知,则可以使用jQuery Animated

http://jsbin.com/dadiz/1/edit

答案 3 :(得分:0)

您可以在.click()函数的帮助下显示它,这是jquery中的内置函数。

$("the_id").click(function(){
 //your stuff here
});

查找有关.click() here的更多信息。