如何创建一个显示在窗口底部角落的DIV(经过一段时间后）

How does one create a DIV that appears in the bottom corner of the window (after a set amount of time)?

本文关键字：底部 角落 DIV 经过 一段时间 窗口 显示 创建 何创建 一个      更新时间：2023-11-22

我想创建一个"LiveChat Offering"弹出窗口，在我们的访问者到达特定页面后，该弹出窗口会出现在屏幕底部，并且已经在该页面上停留了大约30秒。如果可能的话，我想保留代码jQuery/CSS。

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">Some jQuery that will change the 'display:hidden;' to 'display:block;' on the DIV after 30 seconds</script>
<div id="live-chat" style="position:absolute;bottom:0px; right:100px;z-index:5;display:none;>
 <h4>Need Help?</h4>
 <p>Click the link below for assistance</p>
 <a href="live-chat.php">Chat with a salesman</a>
</div>

看起来你已经得到了位置部分，你在问延迟部分？

像这样setTimeout的东西可以工作

$(document).ready(function() { 
  setTimeout(function() {
    $('#live-chat').show();
  }, [delay in ms]);
}

您可能还想更改.show()，使其具有某种效果，以提醒用户它已出现。

试试这个：

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#live-chat").css({ "display" : "block" });
}, 30000); // 30 seconds in MS

}); 
</script>
<div id="live-chat" style="position:absolute;bottom:0px; right:100px;z-index:5;display:none;>
 <h4>Need Help?</h4>
 <p>Click the link below for assistance</p>
 <a href="live-chat.php">Chat with a salesman</a>
</div>

祝你好运！

编辑：

用于滑入：

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
// Store our panel into a variable.
var $myPanel = $("#live-chat");
// Get the height of the panel dynamically.
var $myPanelHeight = parseInt($myPanel.height());
// Immediately set the opacity to 0 - to hide it and set its bottom to minus its height.
$myPanel.css({ "opacity" : 0, "bottom" : "-" + $myPanelHeight + "px" });
// Set a timeout for the panel to slide and fade in.
setTimeout(function() {
$myPanel.animate({
    // The CSS properties we want to animate (opacity and bottom position).
    opacity: 1,
    bottom: '0'
  }, 2000, function() {
    // Animation complete. 
    // You can put other code here to do something after it has slid-in.
  });
}, 30000); // 30 seconds in MS

}); 
</script>
<div id="live-chat" style="position: absolute; bottom: 0px; right:100px; z-index:5;">
 <h4>Need Help?</h4>
 <p>Click the link below for assistance</p>
 <a href="live-chat.php">Chat with a salesman</a>
</div>

以下是我所要求的功能的起点：）谢谢大家！我用了迈克尔的例子。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
 $(document).ready(function() {
 setTimeout(function() {
 $("#live-chat").css({ "display" : "block" });
 }, 5000); // 30 seconds in MS

}); 
</script>
</head>
<body>
<div id="live-chat" style="width:250px; height:150px; position:absolute; bottom:0px; right:100px; z-index:5; display:none; border:#ccc 1px dashed;">
 <h4>Need Help?</h4>
 <p>Click the link below for assistance</p>
 <a href="live-chat.php">Chat with a salesman</a>
</div>
</body>
</html>

您可以使用jQuery 的延迟功能

$(document).ready(function() {
    var miliseconds = 30000 //30 seconds
    $("#live-chat").delay(miliseconds).hide();
}

下面是代码的jsfiddle示例：jsfiddle

相关文章：