Javascript 类似于facebook中的对话框通知
我正在尝试做一个类似facebook的通知： 当一个朋友在你的时间线上发布了一些东西， 对话框显示在页面的左下角。它淡入，停留4秒，然后淡出 如果有多个对话框，则第二个对话框将显示在前一个对话框的上方，第三个对话框将显示在第二个对话框的上方，以此类推 此外，我没有成功地完成一个类似facebook的对话 这是我的JSFIDLE： html: 这是一个通知的例子。它显示在页面的左下角： 感谢您的帮助 最后我准备好了：） 你需要：Javascript 类似于facebook中的对话框通知,javascript,jquery,dialog,Javascript,Jquery,Dialog,我正在尝试做一个类似facebook的通知： 当一个朋友在你的时间线上发布了一些东西， 对话框显示在页面的左下角。它淡入，停留4秒，然后淡出 如果有多个对话框，则第二个对话框将显示在前一个对话框的上方，第三个对话框将显示在第二个对话框的上方，以此类推 此外，我没有成功地完成一个类似facebook的对话 这是我的JSFIDLE： html: 这是一个通知的例子。它显示在页面的左下角： 感谢您的帮助 最后我准备好了：） 你需要： 每次创建变量和asign对话框 在关闭功能中，您必须删除此对话
- 每次创建变量和asign对话框
- 在关闭功能中，您必须删除此对话框。因为.dialog（'close'）仅隐藏此对话框
- 计算并设置顶部位置
var bottom = 545, top = 0, height = 150;
function dialog(mytext) {
var myDialog = $('<div/>');
myDialog.addClass('js-notice');
myDialog.text(mytext);
top = $('.js-notice').length * height;
myDialog.dialog({
autoOpen: false,
modal: false,
show: "fade",
hide: "fade",
open: function(){
var tempTop = bottom - top;
if (tempTop < 0) {
tempTop = 0;
}
$(this).parent().css({'top' : tempTop + 'px', 'border' : '1px solid red'});
setTimeout(function()
{
myDialog.dialog('close');
}, 4000);
},
close : function() {
top -= height;
if (top < 0) {
top = 0;
}
$(this).remove();
$('.js-notice').each(function(i) {
var tempTop = bottom - (i * height);
console.log($('.js-notice').length, tempTop);
if (tempTop < 0) {
tempTop = 0;
}
$(this).parent().css({'top' : tempTop + 'px', 'border' : '1px solid green'});
});
}
});
myDialog.dialog("option", "position", {at: "left bottom"});
myDialog.dialog('open');
}
$(document).ready(function() {
dialog('window1');
setTimeout(function(){dialog('window2')},3000);
setTimeout(function(){dialog('window3')},6000);
});
var底部=545，顶部=0，高度=150；
函数对话框（mytext）{
var myDialog=$（''）；
myDialog.addClass（'js-notice'）；
myDialog.text（mytext）；
顶部=$（'.js notice'）。长度*高度；
myDialog.dialog({
自动打开：错误，
莫代尔：错，
显示：“褪色”，
隐藏：“褪色”，
打开：函数（）{
var=底部-顶部；
if（p<0）{
TENTOP=0；
}
$（this.parent（）.css（{'top'：testop+'px'，'border'：'1px实心红色'}）；
setTimeout（函数（）
{
myDialog.dialog（'close'）；
}, 4000);
},
关闭：函数（）{
顶部-=高度；
如果（顶部<0）{
top=0；
}
$（this.remove（）；
$（'.js notice'）。每个（函数（i）{
var TENTOP=底部-（i*高度）；
log（$（'.js notice'）.length，testop）；
if（p<0）{
TENTOP=0；
}
$（this.parent（）.css（{'top'：testop+'px'，'border'：'1px纯绿'}）；
});
}
});
对话框（“选项”、“位置”{at:“左下”}）；
myDialog.dialog（'open'）；
}
$（文档）.ready（函数（）{
对话框（“窗口1”）；
setTimeout（函数（）{dialog（'window2'）}，3000）；
setTimeout（函数（）{dialog（'window3'）}，6000）；
});
- 每次创建变量和asign对话框
- 在关闭功能中，您必须删除此对话框。因为.dialog（'close'）仅隐藏此对话框
- 计算并设置顶部位置
var bottom = 545, top = 0, height = 150;
function dialog(mytext) {
var myDialog = $('<div/>');
myDialog.addClass('js-notice');
myDialog.text(mytext);
top = $('.js-notice').length * height;
myDialog.dialog({
autoOpen: false,
modal: false,
show: "fade",
hide: "fade",
open: function(){
var tempTop = bottom - top;
if (tempTop < 0) {
tempTop = 0;
}
$(this).parent().css({'top' : tempTop + 'px', 'border' : '1px solid red'});
setTimeout(function()
{
myDialog.dialog('close');
}, 4000);
},
close : function() {
top -= height;
if (top < 0) {
top = 0;
}
$(this).remove();
$('.js-notice').each(function(i) {
var tempTop = bottom - (i * height);
console.log($('.js-notice').length, tempTop);
if (tempTop < 0) {
tempTop = 0;
}
$(this).parent().css({'top' : tempTop + 'px', 'border' : '1px solid green'});
});
}
});
myDialog.dialog("option", "position", {at: "left bottom"});
myDialog.dialog('open');
}
$(document).ready(function() {
dialog('window1');
setTimeout(function(){dialog('window2')},3000);
setTimeout(function(){dialog('window3')},6000);
});
var底部=545，顶部=0，高度=150；
函数对话框（mytext）{
var myDialog=$（''）；
myDialog.addClass（'js-notice'）；
myDialog.text（mytext）；
顶部=$（'.js notice'）。长度*高度；
myDialog.dialog({
自动打开：错误，
莫代尔：错，
显示：“褪色”，
隐藏：“褪色”，
打开：函数（）{
var=底部-顶部；
if（p<0）{
TENTOP=0；
}
$（this.parent（）.css（{'top'：testop+'px'，'border'：'1px实心红色'}）；
setTimeout（函数（）
{
myDialog.dialog（'close'）；
}, 4000);
},
关闭：函数（）{
顶部-=高度；
如果（顶部<0）{
top=0；
}
$（this.remove（）；
$（'.js notice'）。每个（函数（i）{
var TENTOP=底部-（i*高度）；
log（$（'.js notice'）.length，testop）；
if（p<0）{
TENTOP=0；
}
$（this.parent（）.css（{'top'：testop+'px'，'border'：'1px纯绿'}）；
});
}
});
对话框（“选项”、“位置”{at:“左下”}）；
myDialog.dialog（'open'）；
}
$（文档）.ready（函数（）{
对话框（“窗口1”）；
setTimeout（函数（）{dialog（'window2'）}，3000）；
setTimeout（函数（）{dialog（'window3'）}，6000）；
});
dialog（'window1'），我想显示第二个对话框，对话框将显示在页面底部。如果我调用dialog（'window2'）；如果对话框（“window1”）尚未关闭，请将第二个对话框置于第一个对话框之上。如果对话框1未显示，请将对话框2置于底部。。等非常感谢。如果dialog1被隐藏，您想显示第二个对话框吗？如果调用函数dialog（'window1'），我想显示第二个对话框，对话框将显示在页面底部。如果我调用dialog（'window2'）；如果对话框（“window1”）尚未关闭，请将第二个对话框置于第一个对话框之上。如果对话框1未显示，请将对话框2置于底部。。等非常感谢。哇！谢谢你的代码和解释！！你帮了我！非常感谢你！！再次感谢您，但有一个小错误：当我将ready函数设置为：$（document）.ready（函数（）{dialog（'window1'）；dialog（'window2'）；dialog（'window3'）；}）；窗户3没有放在他合适的地方谢谢你我查错了：哇！谢谢你的代码和解释！！你帮了我！非常感谢你！！再次感谢您，但有一个小错误：当我将ready函数设置为：$（document）.ready（函数（）{dialog（'window1'）；dialog（'window2'）；dialog（'window3'）；}）；窗户没有放在他合适的地方谢谢我查错了
var bottom = 545, top = 0, height = 150;
function dialog(mytext) {
var myDialog = $('<div/>');
myDialog.addClass('js-notice');
myDialog.text(mytext);
top = $('.js-notice').length * height;
myDialog.dialog({
autoOpen: false,
modal: false,
show: "fade",
hide: "fade",
open: function(){
var tempTop = bottom - top;
if (tempTop < 0) {
tempTop = 0;
}
$(this).parent().css({'top' : tempTop + 'px', 'border' : '1px solid red'});
setTimeout(function()
{
myDialog.dialog('close');
}, 4000);
},
close : function() {
top -= height;
if (top < 0) {
top = 0;
}
$(this).remove();
$('.js-notice').each(function(i) {
var tempTop = bottom - (i * height);
console.log($('.js-notice').length, tempTop);
if (tempTop < 0) {
tempTop = 0;
}
$(this).parent().css({'top' : tempTop + 'px', 'border' : '1px solid green'});
});
}
});
myDialog.dialog("option", "position", {at: "left bottom"});
myDialog.dialog('open');
}
$(document).ready(function() {
dialog('window1');
setTimeout(function(){dialog('window2')},3000);
setTimeout(function(){dialog('window3')},6000);
});