我想在底部的每个网页中显示实时聊天框。我做了，但对齐不正常。我想让它类似于这个实时聊天框示例：（https://www.tawk.to/testimonials/）。请帮我解决这个问题。
我的代码是：https://jsfiddle.net/fn77d0de/2/
// JavaScript Document
var username = "";
function send_message(bot_response) {
var prevState = $("#container").html();
console.log(prevState.length);
if (prevState.length > 8) {
prevState = prevState + "<br>";
}
$("#container").html(prevState + "<span class='current_message'>" + "<span class='chatBot'>Chatbot: </span>" + bot_response + "</span>");
$("#container").scrollTop($("#container").prop("scrollHeight"));
$(".current_message").hide();
$(".current_message").delay(500).fadeIn();
$(".current_message").removeClass("current_message");
//$("#container").html("<span class='chatBot'>Chatbot: </span>" + message );
}
function get_userName() {
//send_message("Hello, what is your name?");
username = "${outParams.userName}";
send_message("Nice to meet you " + username + ", how may can may I help you.");
}
function ai(newMessage) {
var id = "1";
var path = "http://localhost:8080/vfim/chatService.do";
if (username.length < 1) {
username = newMessage;
send_message("Nice to meet you " + username + ", how are you doing?");
} else if (newMessage.indexOf("how are you") >= 0) {
send_message("Thanks, I am good!");
} else if (newMessage.indexOf("time") >= 0) {
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
send_message("Current time is: " + h + ":" + m);
} else {
$.post(path,
{
userMessage: newMessage
},
function(data) {
//alert("inside ajax"+data);
send_message(data);
});
/* $.get(path,function(data){
console.log("no match");
console.log(data);
send_message(data);
}); */
}
}
$(function() {
$.ajax({
url: "chatWindow.html",
type: 'GET',
success: function(data) {
$('body').append(data);
//$('#content').html($(data).find('#content').html());
$('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');
var logged_in = false;
$(".pageTitleHeader").click(function() {
logged_in = !logged_in;
checkLogin();
});
function checkLogin() {
if (logged_in)
$(".contentBox").show();
else
$(".contentBox").hide();
}
}
});
get_userName();
$("#textarea").keypress(function(event) {
if (event.which == 13) {
if ($("#enter").prop("checked")) {
console.log("enter pressed");
$("#send").click();
event.preventDefault();
//$("#textarea").val("");
}
}
});
$("#send").click(function() {
var userName = "<span class='uname'>You: </span>";
var latestMessage = $("#textarea").val();
$("#textarea").val("");
var prevState = $("#container").html();
//console.log(prevState.length);
if (prevState.length > 1) {
prevState = prevState + "<br>";
}
$("#container").html(prevState + userName + latestMessage);
$("#container").scrollTop($("#container").prop("scrollHeight"));
ai(latestMessage);
});
});
setTimeout(function() {
$("#live-chat").css({
"display": "block"
});
}, 900); // 30 seconds in MS
// 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
function getScripts(scripts, callback) {
var progress = 0;
scripts.forEach(function(script) {
$.getScript(script, function() {
if (++progress == scripts.length) callback();
});
});
}body {
margin: 0;
background-color: #f2f2f2;
font-family: arial, sans-serif;
font-weight: bold;
}
#header {
width: 100%;
height: 60px;
background-color: #333;
box-shadow: 0px 4px 2px #333;
}
#header>h1 {
width: 1024px;
margin: 0px auto;
color: white;
}
#container {
width: 1024px;
height: 400px;
margin: 0px auto;
margin-top: 20px;
background-color: white;
border: 1px solid #333;
overFlow: scroll;
}
#controls {
width: 1024px;
margin: 0px auto;
}
#textarea {
resize: none;
width: 940px;
}
#send {
font-size: 24px;
position: absolute;
}
.uname {
color: blue;
font-weight: bold;
}
.chatBot {
color: green;
font-weight: bold;
}
#live-chat {
position: absolute;
bottom: 0px;
right: 0px;
/* width: 200px;
height: 100px;*/
z-index: 5;
background: #789;
border-radius: 5px 5px 0 0;
padding: 10px;
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<a href="page1.html">Page1</a>
<a href="page2.html">Page2</a>
<a href="page3.html">Page3</a>
<div id="live-chat">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr class="livepageTitle">
<td width="50%" class="maincurve" scope="col">
<h1 class="pageTitleHeader">Live Chat</h1>
</td>
<td width="50%" class="maincurvecls" scope="col">
<table border="0" align="right" cellpadding="0" cellspacing="0" id="tblPageContent">
<tr>
<!-- BODY STARTS -->
<td height="31" align="right" valign="middle" nowrap class="innerPageTopLeftBGWithText">
<dt:timeZone id="IST">IST</dt:timeZone>
<dt:format pattern="dd-MMM-yyyy [hh:mm a z]" timeZone="IST">
<dt:currentTime />
</dt:format>
</td>
<!-- <td width="14" height="31" align="right" valign="middle"><a href="#" title="Help" onClick="helpWindow('corporate/admin/admin_ma_accrts_add.htm')"><img src="/sbijava/images/help_icon.jpg" alt="Help" width="14" height="13" border="0" align="middle"></a></td> -->
<!-- <td width="29" height="31" align="right" valign="middle" class="helpAndPrintLinks" onClick="helpWindow('corporate/admin/admin_ma_accrts_add.htm')"><a href="#" title="Help">Help</a> </td> -->
</tr>
<!-- BODY ENDS -->
<!-- FOOTER STARTS -->
<!-- FOOTER ENDS -->
</table>
</td>
</tr>
<!-- Tab starts -->
<tr class="contentBox">
<td colspan="2" align="left" valign="top" scope="row" class="pageContentBG">
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="tabtblbrdr">
<!-- <tr>
<td colspan="6" class="innerPageSectionHeading">Select the Date Range </td>
</tr> -->
<tr>
<td align="left" width="30%">
<!-- <div id="header">
<h1>jQuery Chatbot v. 1.0</h1>
</div> -->
<div id="container"> </div>
<div id="controls">
<textarea id="textarea" placeholder="Enter your message here..."></textarea>
<button id="send">Send</button>
<br>
<input checked type="checkbox" id="enter">
<label>Send on enter</label>
</div>
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</div>
</body>
</html>
答案 0 :(得分：0)
好的，首先让我先告诉你为什么这不起作用。原因有很多。
进行此休息的具体风格如下。
#controls {
width: 1024px; /* This width */
margin: 0px auto;
}
#textarea {
resize: none;
width: 940px; /* This width */
}
#container {
width: 1024px; /* This width */
height: 400px;
margin: 0px auto;
margin-top: 20px;
background-color: white;
border: 1px solid #333;
overFlow: scroll;
}
您可以在这里看到，在您使用的众多类中，宽度非常大。你也使用过表格，我不太清楚为什么。它们并不是必需的，特别是对于您正在进行的工作。我已经根据你的需要剥夺了所有这些，你可以用纯粹的CSS来实现。
我会改变这一点，但这个答案是专门解决你的问题。您可以在下面找到我的更改。如果您对我所做的事有任何疑问，我很乐意解释。
#live-chat {
position: absolute;
bottom: 0px;
right: 20px;
width: 300px;
height: auto;
z-index: 5;
background: #789;
border-radius: 5px 5px 0 0;
padding: 10px;
display: block;
box-sizing: border-box;
}
#send {
font-size: 24px;
margin-top: 10px;
}
#textarea {
resize: none;
width: 100%;
} <a href="page1.html">Page1</a>
<a href="page2.html">Page2</a>
<a href="page3.html">Page3</a>
<div id="live-chat">
<h1 class="pageTitleHeader">Live Chat</h1>
<!--
<dt:timeZone id="IST">IST</dt:timeZone>
<dt:format pattern="dd-MMM-yyyy [hh:mm a z]" timeZone="IST">
<dt:currentTime />
</dt:format> -->
<a href="#" title="Help" onClick="helpWindow('corporate/admin/admin_ma_accrts_add.htm')"><img src="/sbijava/images/help_icon.jpg" alt="Help" width="14" height="13" border="0" align="middle"></a>
<textarea id="textarea" placeholder="Enter your message here..."></textarea>
<button id="send">Send</button>
<input checked type="checkbox" id="enter">
</div>