我正在爲我的郵件聊天機器人設計一個聊天框。我對網頁設計和JavaScript知之甚少。我無法讓我的聊天框最小化或關閉。我試過從各個網站爲該功能複製幾個.js
代碼,但沒有任何工作。爲最小化和關閉按鈕爲我的聊天框的Javascript不會工作
<html>
<head>
<title>chatbox for bot</title>
</head>
<style>
.popup-wrapper {
position: fixed;
background-color: #FFFFFF;
right: 50px;
bottom: 0px;
padding: 0px;
height: 410px;
width: 250px;
z-index: 200;
-moz-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
}
.popup-header {
background-color: #5b6fc7;
color: #ffffff;
height: 10%;
padding: 10px 10px 5px 10px;
-moz-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
}
.popup-tab {
position: fixed;
right: 50px;
bottom: 0px;
padding: 10px 10px 5px 10px;
background-color: #5b6fc7;
height: 40px;
width: 250px;
z-index: 200;
cursor: pointer;
-moz-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
color: #ffffff;
}
.botMessage {
background-color: #eeeeee;
position: relative;
padding: 5px;
margin: 5px;
display: inline-block;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
.humanMessage {
background-color: #5b6fc7;
position: relative;
color: #FFF;
padding: 5px;
margin: 5px;
display: inline-block;
float: right;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
.close-chat, .minimize-chat {
cursor: pointer;
margin-right: 5px;
float: right !important;
}
.convo {
height: 320px;
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #eeeeee;
}
.chatlog {
width: 750px;
height: 300px;
padding: 5px;
border: 1px solid #000000;
}
.scroll {
overflow-y: auto;
overflow-x: hidden;
}
.agentMessage {
background-color: #5cb85c;
position: relative;
padding: 5px;
margin: 5px;
display: inline-block;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
form#talkform {
width
height: 50px;
padding: 10px 10px 5px 10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
/*
.say something {
width: 0px;
border-color: #ffffff;
border-style: solid;
}
*/
}
.hidden {
display: none !important;
visibility: hidden !important;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}
#popup-WrapperClose {
width: 15px;
height: 15px;
z-index: 12;
border-radius: 50%;
background-color: red;
position: absolute;
top: 15px;
right: 15px;
}
#popup-WrapperMini {
width: 15px;
height: 15px;
z-index: 12;
border-radius: 50%;
background-color: green;
position: absolute;
top: 15px;
right: 45px;
}
img {
display: block;
margin: 80px auto -60px auto;
}
</style>
<body>
<div class="popup-wrapper">
<div class="popup-header">
<b>
Talk to
<span class="botname">Ella</span>
</b>
<input id="popup-WrapperClose" type="button" onclick="windowClose();"></input>
<input id="popup-WrapperMini" type="button" onclick="windowMin();"></input>
</div>
<div class="popup-chat">
<div class="response hidden"></div>
<div class="convo scroll">
<div class="humanMessage">
<div class="usersay"> </div>
</div>
<br></br>
<div class="botMessage">
<div class="ella">
<div class="botsay"></div>
</div>
</div>
<br></br>
</div>
<form method="post" name="talkform" id="talkform" action="index.php">
<form id="talkform" class="talkform">
<input id="say" name="say" placeholder="say something" type="text">
<input id="say-button" class="say-button" name="say-button" value="say" type="submit">
</form>
</form>
</div>
</div>
<script>
$('#popup-wrapperClose').click(function() {
$("#popup-wrapper").hide(300);
});
$('#popup-wrapperMini').click(function() {
if (minimize === false) {
$("#popup-wrapperMini").hide();
$('#popup-wrapper').css('display','block');
minimize = true;
} else {
$("#popup-wrapper").show();
$('#popup-wrapper').css('display','none');
minimize = false;
}
});
return false;
});
</script>
</body>
</html>
篤嗨!真奇怪。它正在關閉並最小化。什麼不適合你?最好的祝福。 – deChristo
對不起!我在我評論的人中犯了一個錯誤。有用。謝謝你的評論deChristo。小提琴正是我所希望的。但我試圖執行相同的,它仍然無法正常工作。我甚至調試了小提琴,並試圖做同樣的事情,但沒有任何結果。當我調試小提琴時,我注意到頭部中有這個「」..,我是否要下載並以某種方式鏈接? –
好的,我實際上下載了jquery-3.1.1.js,並將它複製到chatbox目錄,並將它鏈接到html和瞧,..它工作!感謝deChristo的幫助,我非常感謝.... ....你搖滾! –