Question

我正在为我的邮件聊天机器人设计一个聊天框。我对网页设计和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>

Answer 1

您的代码中需要纠正一些事项：

1）在你的Jquery代码中，你使用的是id选择器（＃），而你的<div>都没有id。

2）您使用错误的类名来最小化和关闭：

HTML中的

：

popup-WrapperMini

JS中的

：

popup-wrapperMini

3）在你使用var最小化的javascript中，你是否来自？

我做了一个JSFiddle，最小化和近距离工作。请看一下： https://jsfiddle.net/dudu84/ue0c94q7/1/

希望它有所帮助！

Answer 2

如果您发现使用$引用元素的代码，那么代码很可能是jQuery，而不是简单的javascript。除非你加载jQuery，否则它不会起作用。这是一个纯粹的JavaScript示例。请注意global minimize。

的声明

此外，div需要ID，并且已添加到popup-wrapper以及新外wrapper。

popup-wrapper用于最小化并显示弹出窗口，wrapper用于关闭功能。

<强>更新

代码现在将转换最小化和非最小化

以下是updated jsfiddle

HTML

<title>chatbox for bot</title>
<div id="wrapper">
  <div class="popup-header" class="popup-header" >
    <b>
            Talk to 
            <span class="botname">Ella</span>
        </b>
    <input id="popup-WrapperMini" type="button" onclick="windowMin();">
    <input id="popup-WrapperClose" type="button" onclick="windowClose();">
  </div>
  <div id="popup-wrapper" class="popup-wrapper">
    <div class="popup-chat">
      <div class="response hidden"></div>
      <div class="convo scroll">
        <div class="humanMessage">
          <div class="usersay">&nbsp;</div>
        </div>
        <br>
        <div class="botMessage">
          <div class="ella">
            <div class="botsay"></div>
          </div>
        </div>
        <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>
</div>

的Javascript

var minimize = false;

function windowClose() {
  var e = document.getElementById("wrapper");
  e.style.display = "none";
}

function windowMin() {
  var e = document.getElementById("popup-wrapper");
  if (minimize === false) {
    // minimize (hide)
    // e.style.display = "none";
    addClass(e, "wrapper-min");
    minimize = true;
  } else {
    // show
    // e.style.display = "block";
    removeClass(e, "wrapper-min");
    minimize = false;
  }
}

function addClass(e, name) {
    if (typeof e !== "undefined" && typeof e.classList !== "undefined" && name.length > 0){
    e.classList.add(name)
    }
}

function removeClass(e, name) {
    if (typeof e !== "undefined" && typeof e.classList !== "undefined"){
    e.classList.remove(name);
    }
}

CSS

    .popup-wrapper {
        /* position: fixed; */
        background-color: #FFFFFF;
        /* right: 50px; */
        bottom: 0px;
        padding: 0px;
        max-height: 410px;
        width: 250px;
        z-index: 200;
        -moz-border-radius:10px 10px 0px 0px;  
        border-radius:10px 10px 0px 0px;
     -webkit-transition: max-height 0.5s ease-in;  
     -moz-transition: max-height 0.5s ease-in;  
     -ms-transition: max-height 0.5s ease-in;  
     -o-transition: max-height 0.5s ease-in;  
     transition: max-height 0.5s ease-in;  
     overflow: hidden;
    }

    .popup-header {
        background-color: #5b6fc7;
        color: #ffffff;
        height: 10%;
      width: 250px;
        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;
      margin-left: 5px;
        /* right: 15px; */
    }

    #popup-WrapperMini {
        width: 15px;
        height: 15px;
        z-index: 12;
        border-radius: 50%;
        background-color: green;
        /* position: absolute; */
        top: 15px;
      margin-left: 100px;
        /* right: 45px; */
    }

    img {
        display: block;
        margin: 80px auto -60px auto;
    }

.wrapper-min{
  -webkit-transition: max-height 0.5s ease-out;  
  -moz-transition: max-height 0.5s ease-out;  
  -ms-transition: max-height 0.5s ease-out;  
  -o-transition: max-height 0.5s ease-out;  
  transition: max-height 0.5s ease-out;  
  overflow: hidden;
  max-height: 0;
}

我的聊天框的最小化和关闭按钮的Javascript刚刚工作

2 个答案: