弹窗页面的样式

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    .talk_con {
      width: 600px;
      height: 500px;
      border: 1px solid #666;
      margin: 50px auto 0;
      background: #f9f9f9;
    }
    .talk_show {
      width: 580px;
      height: 420px;
      border: 1px solid #666;
      background: #fff;
      margin: 10px auto 0;
      overflow: auto;
    }
    .talk_input {
      width: 580px;
      margin: 10px auto 0;
    }
    .whotalk {
      width: 30px;
      height: 30px;
      float: left;
      outline: none;
    }
    .talk_word {
      width: 420px;
      height: 26px;
      padding: 0px;
      float: left;
      margin-left: 10px;
      outline: none;
      text-indent: 10px;
    }
    .talk_sub {
      width: 56px;
      height: 30px;
      float: left;
      margin-left: 10px;
    }
    .atalk {
      margin: 10px;
    }
    .atalk span {
      display: inline-block;
      background: #0181cc;
      border-radius: 10px;
      color: #fff;
      padding: 5px 10px;
    }
    .btalk {
      margin: 10px;
      text-align: right;
    }
    .btalk span {
      display: inline-block;
      background: #ef8201;
      border-radius: 10px;
      color: #fff;
      padding: 5px 10px;
    }
  </style>
  <script type="text/javascript" src="/static/assets/js/jquery-3.5.1.min.js"></script>
  <script type="text/javascript">
    window.onload = function() {
      
      $("input").keypress(function (e) {
        if(e.which == 13){//检测回车键
          //执行回车事件
          send();
        }
      });
    }

    function send(){
      var Words = document.getElementById("words");
      var Who = document.getElementById("who");
      var TalkWords = document.getElementById("talkwords");
      var TalkSub = document.getElementById("talksub");
      //定义空字符串
      var str = "";
      if (TalkWords.value == "") {
        // 消息为空时弹窗
        alert("消息不能为空");
        return;
      }
      var word = TalkWords.value
      document.getElementById("talkwords").value="";

      str = '<div class="btalk"><span>' + word + '</span></div>';
      Words.innerHTML = Words.innerHTML + str;
      add();

      $.ajax({
        url: '/AiController/query',
        type: 'post',
        data: {
          content: word,
        },
        beforeSend: function() {
          $("body").append('<div id="load" style="position:fixed;top:30%;z-index:1200;background:url(/static/admin/images/loading.gif) top center no-repeat;width:100%;height:140px;margin:auto auto;"></div>');
        },
        complete: function () {
          $("#load").remove();
        },
        success: function (res) {
          console.log(res);
          var response = res.msg;
          str = '<div class="atalk"><span>' + response + '</span></div>';
          Words.innerHTML = Words.innerHTML + str;
          add();
        }
      });

    }

    function add() {

      document.getElementById('words').scrollTop = document.getElementById('words').scrollHeight

    }

  </script>
</head>
<body>
<div class="talk_con">
  <div class="talk_show" id="words">
    <div class="atalk"><span id="asay">您好：我是您的智能小助手Hibiki</span></div>
    <div class="btalk"><span id="bsay">你好</span></div>
  </div>
  <div class="talk_input">
    <input type="text" class="whotalk" id="who" value="输入" disabled>
    <input type="text" class="talk_word" id="talkwords">
    <input type="button" value="发送" class="talk_sub" id="talksub" onclick="send()">
  </div>
</div>
</body>
</html>

在使用的页面引入按钮

html
1
2
<button class="pear-btn pear-btn-warming pear-btn-md" onclick="message()" title="智能小助手"><i class="layui-icon layui-icon-template"></i>
</button>
  • 用layui打开弹窗
javascript
1
2
3
4
5
6
7
8
9
function message(){
  layer.open({
    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    type:2,
    title:"智能助手",
    area: ['50%','85%'],
    content:  rootPath + "/AiController/view"
  });
}
  • 用js打开弹窗
javascript
1
2
3
4
5
6
7
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
var popupWidth = 1000;
var popupHeight = 600;
var left = (screenWidth - popupWidth)/2;
var top = (screenHeight - popupHeight)/2;
var popupWindow = window.open('AI.html', 'popup', 'width=' + popupWidth + ',height=' + popupHeight + ',left=' + left + ',top=' + top);