1

訪問者が特定のページに到着し、そのページに約 30 秒間滞在した後に画面の下部に表示される「LiveChat Offering」ポップアップを作成したいと思います。可能であれば、コード 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>
4

4 に答える 4

1

位置の部分はすでに取得済みのようですが、遅延の部分について質問していますか?

setTimeoutこのようなものでうまくいくかもしれません

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

.show()また、表示されたことをユーザーに警告する何らかの効果を持つようにを変更することもできます。

于 2012-07-18T16:55:23.343 に答える
0

これを試して：

<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>
于 2012-07-18T16:58:14.810 に答える
0

jQueryの遅延機能が使える

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

コードの jsfiddle の例を次に示します。

于 2012-07-18T17:02:37.357 に答える
0

以下は、私が求めていた機能を備えた出発点です:) みんなありがとう！私はマイケルの例を使用しました...

<!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>
于 2012-07-18T17:10:01.423 に答える