如何在聊天中回复特定消息，就像使用 html css javascript/jquery 的 skype/whatsapp

Question

我正在尝试为移动和桌面网站制作聊天框。我对如何像Skype和whatsapp一样制作特定的消息回复功能感到震惊。用户单击回复按钮，然后在类型框中显示一个弹出窗口，反映他/她选择作为回复的消息。

示例 -> https://imgur.com/a/tbKfuFe

这里是html的示例代码

enter code here<div class="chat-box">
    <div class="chat-log">
      <div class="chat friend">
        <div class="user-1">
          <img
            class="user-1-photo"
            src="https://static.wikia.nocookie.net/onepiece/images/4/4f/Portgas_D._Ace_Anime_Infobox.png"
            alt="user1"
          />
        </div>
        <div class="user-1-message">
          <div class="chat__message__log">
            <span class="user-info"
              >Portgas <span class="user-info-2">D. Ace</span></span
            >
            <span class="message__date user-info-2">1/12/2021</span>
          </div>
          <p class="chat-message">Hello</p>
          <span class="material-icons-outlined reply-icon"> reply </span>
        </div>
      </div>
      <div class="chat self">
        <div class="user-1">
          <img
            class="user-1-photo"
            src="https://static.wikia.nocookie.net/onepiece/images/6/6d/Monkey_D._Luffy_Anime_Post_Timeskip_Infobox.png"
            alt="user1"
          />
        </div>
        <div class="user-1-message">
          <div class="chat__message__log">
            <span class="user-info"
              >Monkey<span class="user-info-2"> D.Luffy</span></span
            >
            <span class="message__date user-info-2">1/12/2021</span>
          </div>
          <p class="chat-message-2">hiii</p>
          <span class="material-icons-outlined reply-icon"> reply </span>
        </div>
      </div>
    </div>
    <div class="chat-form">
      <textarea></textarea>
      <button>send</button>
    </div>
  </div>

这里是css的样式

.chat-box {
  width: 676px;
  height: 440px;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
  margin: 15px 20px 0 20px;
  position: relative;
}

.chat-log {
  height: 365px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.chat {
  display: flex;
  margin: 15px 45px;
  justify-content: flex-start;
  flex-flow: row wrap;
  cursor: pointer;
}

.chat.friend {
  flex-flow: row wrap;
}

.chat.self {
  flex-flow: row-reverse wrap;
}

.user-1-photo {
  width: 30px;
}

.user-1-message {
  display: flex;
  flex-direction: column;
  margin: 0 10px;
}

.chat__message__log {
  line-height: 12px;
  margin-bottom: 5px;
  padding: 0 15px;
}

.user-info {
  font-size: 12px;
  letter-spacing: 0px;
  color: #444444;
  font-weight: 600;
}

.user-info-2 {
  font-size: 12px;
  color: #676767;
  font-weight: 500;
}

.chat-message {
  font-size: 14px;
  color: #2b2c2d;
  border-radius: 8px;
  background-color: #f5fbff;
  padding: 10px 15px;
}
.chat-message-2 {
  font-size: 14px;
  color: #2b2c2d;
  border-radius: 8px;
  background-color: #f1f1f1;
  padding: 10px 15px;
}

.reply-icon {
  font-size: 12px;
  color: #2b2c2d;
}

.chat-form {
  width: 636px;
  height: 50px;
  margin: 0 20px;
  background-color: #f5fbff;
  border-radius: 6px;
  border: solid 1px white;
  display: flex;
  align-items: center;
}

.chat-form textarea {
  font-size: 16px;
  width: 90%;
  height: 25px;
  background: transparent;
  border: none;
  resize: none;
  overflow-y: hidden;
}

.chat-form textarea:focus {
  outline: none;
}

至于 javascript/jquery 我不知道从哪里开始。

小提琴：https://jsfiddle.net/Anurag2210/m0bod8th/23/

Answer 1

工作演示： https://jsfiddle.net/vxs5qk47/9/

$("#btnSendMsg").on("click", function (e) {
    if ($("#txtMsg").val().trim().length) {
        var msg = $("#txtMsg").val();
        var template =
            '<div class="chat self">' +
            '    <div class="user-1">' +
            '        <img class="user-1-photo" src="https://static.wikia.nocookie.net/onepiece/images/6/6d/Monkey_D._Luffy_Anime_Post_Timeskip_Infobox.png" alt="user1">' +
            '    </div>' +
            '    <div class="user-1-message">' +
            '        <div class="chat__message__log">' +
            '            <span class="user-info">Monkey<span class="user-info-2"> D.Luffy</span></span>' +
            '            <span class="message__date user-info-2">1/12/2021</span>' +
            '        </div>' +
            '        <p class="chat-message-2">' + msg + '</p>' +
            '        <span class="material-icons-outlined reply-icon"> reply </span>' +
            '    </div>' +
            '</div>';
    }

    $(".chat-log").append(template);
    $("#txtMsg").val("");
    $("#txtMsg").focus();
});

.chat-box {
    width: 676px;
    height: 440px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    margin: 15px 20px 0 20px;
    position: relative;
}

.chat-log {
    height: 365px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.chat {
    display: flex;
    margin: 15px 45px;
    justify-content: flex-start;
    flex-flow: row wrap;
    cursor: pointer;
}

.chat.friend {
    flex-flow: row wrap;
}

.chat.self {
    flex-flow: row-reverse wrap;
}

.user-1-photo {
    width: 30px;
}

.user-1-message {
    display: flex;
    flex-direction: column;
    margin: 0 10px;
}

.chat__message__log {
    line-height: 12px;
    margin-bottom: 5px;
    padding: 0 15px;
}

.user-info {
    font-size: 12px;
    letter-spacing: 0px;
    color: #444444;
    font-weight: 600;
}

.user-info-2 {
    font-size: 12px;
    color: #676767;
    font-weight: 500;
}

.chat-message {
    font-size: 14px;
    color: #2b2c2d;
    border-radius: 8px;
    background-color: #f5fbff;
    padding: 10px 15px;
}
.chat-message-2 {
    font-size: 14px;
    color: #2b2c2d;
    border-radius: 8px;
    background-color: #f1f1f1;
    padding: 10px 15px;
}

.reply-icon {
    font-size: 10px;
    color: #2b2c2d;
}

.chat-form {
    width: 636px;
    height: 50px;
    margin: 0 20px;
    background-color: #f5fbff;
    border-radius: 6px;
    border: solid 1px white;
    display: flex;
    align-items: center;
}

.chat-form textarea {
    font-size: 16px;
    width: 90%;
    height: 25px;
    background: transparent;
    border: none;
    resize: none;
    overflow-y: hidden;
}

.chat-form textarea:focus {
    outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat-box-container">
    <div class="chat-box">
        <div class="chat-log">
            <div class="chat friend">
                <div class="user-1">
                    <img class="user-1-photo" src="https://static.wikia.nocookie.net/onepiece/images/4/4f/Portgas_D._Ace_Anime_Infobox.png" alt="user1" />
                </div>
                <div class="user-1-message">
                    <div class="chat__message__log">
                        <span class="user-info">Portgas <span class="user-info-2">D. Ace</span></span>
                        <span class="message__date user-info-2">1/12/2021</span>
                    </div>
                    <p class="chat-message">Hello</p>
                    <span class="material-icons-outlined reply-icon"> reply </span>
                </div>
            </div>
            <div class="chat self">
                <div class="user-1">
                    <img class="user-1-photo" src="https://static.wikia.nocookie.net/onepiece/images/6/6d/Monkey_D._Luffy_Anime_Post_Timeskip_Infobox.png" alt="user1" />
                </div>
                <div class="user-1-message">
                    <div class="chat__message__log">
                        <span class="user-info">Monkey<span class="user-info-2"> D.Luffy</span></span>
                        <span class="message__date user-info-2">1/12/2021</span>
                    </div>
                    <p class="chat-message-2">hiii</p>
                    <span class="material-icons-outlined reply-icon"> reply </span>
                </div>
            </div>
        </div>
        <div class="chat-form">
            <textarea id="txtMsg"></textarea>
            <button id="btnSendMsg">send</button>
        </div>
    </div>
</div>