我的聊天框的最小化和关闭按钮的 JavaScript 不起作用-6ren

我的聊天框的最小化和关闭按钮的 JavaScript 不起作用

转载作者：行者123 更新时间：2023-12-03 05:25:34

25

4

我正在为我的邮件聊天机器人设计一个聊天框。我对网页设计和 JavaScript 知之甚少。我无法最小化或关闭我的聊天框。我尝试从各个站点复制该函数的多个 .js 代码，但没有一个有效。

<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">&nbsp;</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>

最佳答案

您的代码中有一些地方需要纠正:

1) 在您的 Jquery 代码中，您使用的是 id 选择器 (#)，并且没有使用 <div>有 id。

2)您为最小化和关闭按钮使用了错误的类名:

在 HTML 中:

popup-WrapperMini

在 JS 中:

popup-wrapperMini

3)在 javascript 中，您正在使用 var 最小化，但您是它来自吗？

我用最小化和紧密工作制作了一个 JSFiddle。请看一下: https://jsfiddle.net/dudu84/ue0c94q7/1/

希望对你有帮助!

关于我的聊天框的最小化和关闭按钮的 JavaScript 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41155246/

25

4

0

文章推荐： javascript - 从 Electron 函数传回数据

文章推荐： javascript - 使用 AngularJS 交换 JavaScript 数组中的行/索引

文章推荐： javascript - Google map Api 标记不适用于多个位置

文章推荐： javascript - 如何使用n选择最新的node.js v6版本？

没有标题栏的 qtip2 关闭按钮
我想要一个没有标题栏的 qtip2 工具提示，但在角落里有一个关闭图标。有没有办法指定它，或者我是否必须使用创建它的代码？我正在考虑将按钮向左或向右 float 的东西，允许其余内容填充工具提示 di
java - JFrame 关闭按钮
我有一个 Jframe 窗口，里面有一个按钮。通过单击该按钮，它会打开一个新的 JFrame 窗口。但是当我关闭这个窗口时，它会自动关闭第一个带有按钮的 Jframe 窗口。当我关闭第二个 Jfram
javascript - float 关闭按钮
我有一个关闭按钮。如何使关闭按钮在向下滚动页面时悬停？现在它位于顶部。当我们向下移动页面时，我希望它使其向右浮动(将内容悬停)。最佳答案使用 position 属性和 bottom、right 属
java - 关闭按钮 JTabbedPane
我正在使用 jtabbedpane，我正在尝试为选项卡设置一个关闭按钮，但不要丢失它所具有的标题! 注释: “GestorJanelas”是我的 JTabbedPane 字符串“titulo”是选项卡
对话框标题栏中的 GWT 关闭按钮
是否有非 JSNI 方法可以向对话框的标题栏区域添加关闭按钮？最佳答案我们从项目一开始就使用了 GWT-ext。这是一个坏主意。他们有很多很酷的小部件，但它们不是 GWT 小部件，而且与 GWT
jQuery:关闭按钮，记住缓存中的操作
我正在尝试为以下机制找到解决方案: 我有一个底部播放器，它显示在所有页面上，角落里有一个“x”关闭按钮。每当我单击“X”时，播放器就会关闭，但如果我刷新页面，它会再次显示，我需要再次单击“X”才能隐藏
Java jFrame 关闭按钮
您好，我有一个 jFrame，我想问问用户他是否确定在单击关闭按钮时关闭 jframe: this.addWindowListener(new java.awt.event.WindowAda
javascript - body 关闭按钮
我制作了一个 float 在屏幕中间的表单为此我设计了一个关闭按钮但我想在屏幕上的任何地方用鼠标点击关闭表单我的代码 $(".offer-close").click(function ()
javascript - 仅通过单击来折叠/关闭按钮
我正在尝试编写一个可以在同一行中多次放置的响应式按钮，并始终在包含该按钮的行下方显示其内容。代码片段中有一个工作代码，但它有一个小缺陷:由于使用了伪类 focus，一旦按钮打开，点击屏幕上的任意位置
macos - 覆盖 NSWindow 关闭按钮
我正在开发一个适用于 OS X 的应用程序，在该应用程序中，我使用了一个自定义窗口，该窗口将图像绘制为背景，包括标题栏。我一直在修改this code绘制窗口，然后调用 [NSWindow stand
cross-platform - wxNotebook 关闭按钮？
我正在使用 wxWidgets(C++ 版本)开发记事本应用程序，并且我正在努力实现多文件支持。使用 wxNotebook 类，我似乎找不到任何有关向页面添加关闭按钮的文档，因此我可以轻松关闭单个文件
javascript - Bootstrap 弹出窗口，关闭按钮
我做了以下弹出窗口: https://jsfiddle.net/ca4h0a0q/ Click x This is your div content Javascript: $(
javascript - 如何删除标记信息窗口中的 "x"关闭按钮？
如何删除标记信息窗口中的“X”按钮？ [ “美人鱼奥布里卡(原名:奥布里·亚历克西斯)”， 36.8618,-76.203, 5、 “迈克·欧文/乔治亚·梅森”， “USAVE汽车租赁”， “弗吉尼亚
ios - 如何为模态视图表单实现 "X"关闭按钮
我知道已经有问题问同样的问题，但是，我仍然没有运气在表单模态视图的角落实现“X”按钮。在屏幕截图 HERE 中可以看到我正在尝试实现的一个完美示例。 . (如果 >= 10 代表的人可以通过在此处发
WPF 窗口不应移动、调整大小并且应仅包含最小化、关闭按钮
我正在尝试设置 WPF 窗口。窗口应始终处于最大化状态窗口不能移动或调整大小它应该包含最小化和关闭按钮但不包含最大化按钮我尝试了以下 XAML 代码 xaml 的输出是一个处于最大化状态的
jquery - 延迟启用和禁用 fancybox 关闭按钮
当 fancybox 触发弹出窗口时，我想禁用关闭按钮，并在 x 秒后启用它。有什么解决办法吗？提前致谢。最佳答案这个很有趣。如果您想隐藏关闭按钮以防止至少在 10 秒内关闭，您可能还想禁用
c# - 处理MVVM下WPF中的 "X"关闭按钮
我正在 WPF 中创建一个基本的数据库应用程序，并且我已经开始使用 MVVM 模式。我有一个对话框，要求用户从 ListBox 中选择一个项目，然后单击“确定”。之后，我将用户从 View 模型中的
c - 顶部栏上的 Wine 关闭按钮
如果“允许窗口管理器装饰窗口”已打开。wine 源中知道用户单击此 X 按钮并向应用程序发送 WM_CLOSE 的函数名称是什么？谢谢最佳答案窗口管理器发送类型为 WM_PROTOCOLS 且协议
java - JDialog 不显示最小化/关闭按钮
在研究问题时，似乎大多数人都想做相反的事情(即删除最小化/关闭按钮)。我没有成功使用 reoccurrent setUndecorated 和 setDefaultCloseOperation 这是我
javascript - 关闭按钮 X 未移除
我正在使用 jqueryui 对话框，我想隐藏顶部的 X 按钮。我试过下面的代码，但没有用。 $( '.ui-dialog-titlebar-close').remove(); 我的JS: $(f

首页

博学

6Ren·AI

商城

我的聊天框的最小化和关闭按钮的 JavaScript 不起作用