我的HTML代码是这样的:
<div class="chatbot chatbot--closed ">
<div class="chatbot__header">
<p><strong>Got a question?</strong> <span class="u-text-highlight">Ask Harry</span></p>
<svg class="chatbot__close-button icon-speech" viewBox="0 0 32 32">
<use xlink:href="#icon-speech" />
</svg>
<svg class="chatbot__close-button icon-close" viewBox="0 0 32 32">
<use xlink:href="#icon-close" data-toggle="modal" data-target="#basicModal" />
</svg>
</div>
<div class="chatbot__message-window">
<ul class="chatbot__messages">
<li class="is-ai animation">
<div class="is-ai__profile-picture">
<svg class="icon-avatar" viewBox="0 0 32 32">
<use xlink:href="#avatar" />
</svg>
</div>
<span class="chatbot__arrow chatbot__arrow--left"></span>
<p class='chatbot__message'><strong class='intro'>Hello, I’m Harry, your virtual assistant. I'm here to help with your general enquiries.</strong>Example of questions you can ask for demo purpose: <br><em>Hi / How are you? / I'd like some financial advice / Can you email me a statement? / Can I get a form? / How do I cancel my life insurance? </em></p>
</li>
<!-- Message here -->
</ul>
</div>
<div class="chatbot__entry chatbot--closed">
<input type="text" class="chatbot__input" placeholder="Write a message..." />
<svg class="chatbot__submit" viewBox="0 0 32 32">
<use xlink:href="#icon-send" />
</svg>
</div>
</div>
演示和完整的代码,例如:https://codepen.io/trendingnews/pen/wvBorrR?editors=1010
[当用户在聊天机器人上单击关闭时,它将出现一个反馈模式,以填充使用聊天机器人的用户体验。我希望当聊天机器人打开约30秒钟时出现此反馈模式。因此,如果聊天机器人已打开30秒钟以上,并且用户单击“关闭”,则会出现模式反馈。但是,如果聊天机器人没有打开30秒钟,则用户单击靠近聊天机器人,则不会出现模式。
我该怎么办?
我的html代码是这样的:
有问题?
很难在您的代码中导航,但我会提供准则:
$chatbotHeader.addEventListener("click", () => {
var element = document.getElementsByClassName("chatbot");
element[0].style.display = "none";
showModal.chatClose = performance.now(); // Sets when chat gets open
showModal();
document.getElementById("chat-circle").style.display="block";
},false);
document.getElementById("chat-circle").addEventListener( "click", () => {
var element = document.getElementsByClassName("chatbot");
element[0].classList.remove("chatbot--closed");
element[0].style.display = "block";
showModal.chatOpen = performance.now(); //Sets when chat window is closed
$chatbotInput.focus();
console.log(this);
document.getElementById("chat-circle").style.display="none";
}
);
function showModal() {
if( showModal.chatClose - showModal.chatOpen > 1800) {
alert("show Modal"); // Code to show modal here
}
showModal.chatClose = showModal.chatOpen = 0;
}