Question

我正在尝试通过创建聊天栏来学习。我已经与用户创建了一个侧导航栏，一旦我点击聊天弹出框就会在底部打开。我想在该聊天框中添加输入字段。

我尝试添加输入字段，但我只获得了一半成功;它只是被添加到身体而不是聊天框的底部。

chat.html

     <script>
        //this function can remove a array element.
        Array.remove = function(array, from, to) {
            var rest = array.slice((to || from) + 1 || array.length);
            array.length = from < 0 ? array.length + from : from;
            return array.push.apply(array, rest);
        };

        var total_popups = 0;

        //arrays of popups ids
        var popups = [];

      function close_popup(id)
        {
            for(var iii = 0; iii < popups.length; iii++)
            {
                if(id == popups[iii])
                {
                    Array.remove(popups, iii);

                    document.getElementById(id).style.display = "none";

                    calculate_popups();

                    return;
                }
            }   
        }

           function display_popups()
        {
            var right = 220;

            var iii = 0;
            for(iii; iii < total_popups; iii++)
            {
                if(popups[iii] != undefined)
                {
                    var element = document.getElementById(popups[iii]);
                    element.style.right = right + "px";
                    right = right + 320;
                    element.style.display = "block";
                }
            }

            for(var jjj = iii; jjj < popups.length; jjj++)
            {
                var element = document.getElementById(popups[jjj]);
                element.style.display = "none";
            }
        }

     function register_popup(id, name)
        {

            for(var iii = 0; iii < popups.length; iii++)
            {   
                //already registered. Bring it to front.
                if(id == popups[iii])
                {
                    Array.remove(popups, iii);

                    popups.unshift(id);

                    calculate_popups();


                    return;
                }
            }               

            var element = '<div class="popup-box chat-popup" id="'+ id +'">';
            element = element + '<div class="popup-head">';
            element = element + '<div class="popup-head-left">'+ name +'</div>';
            element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\''+ id +'\');">&#10005;</a></div>';
            element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';
            element = element + '<div class="popup-bottom"><div class="popup-bottom"><div id="'+ id +'"></div><input id="field"></div>';

            document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;  

            popups.unshift(id);

            calculate_popups();

        }

        //calculate the total number of popups suitable and then populate the toatal_popups variable.
        function calculate_popups()
        {
            var width = window.innerWidth;
            if(width < 540)
            {
                total_popups = 0;
            }
            else
            {
                width = width - 200;
                //320 is width of a single popup box
                total_popups = parseInt(width/320);
            }

            display_popups();

        }

        //recalculate when window is loaded and also when window is resized.
        window.addEventListener("resize", calculate_popups);
        window.addEventListener("load", calculate_popups);

    </script>

的style.css

<style>
        @media only screen and (max-width : 540px) 
        {
            .chat-sidebar
            {
                display: none !important;
            }

            .chat-popup
            {
                display: none !important;
            }
        }

        body
        {
            background-color: #e9eaed;
        }

        .chat-sidebar
        {
            width: 200px;
            position: fixed;
            height: 100%;
            right: 0px;
            top: 0px;
            padding-top: 10px;
            padding-bottom: 10px;
            border: 1px solid rgba(29, 49, 91, .3);
        }

        .sidebar-name 
        {
            padding-left: 10px;
            padding-right: 10px;
            margin-bottom: 4px;
            font-size: 12px;
        }

        .sidebar-name span
        {
            padding-left: 5px;
        }

        .sidebar-name a
        {
            display: block;
            height: 100%;
            text-decoration: none;
            color: inherit;
        }

        .sidebar-name:hover
        {
            background-color:#e1e2e5;
        }

        .sidebar-name img
        {
            width: 32px;
            height: 32px;
            vertical-align:middle;
        }

        .popup-box
        {
            display: none;
            position: absolute;
            bottom: 0px;
            right: 220px;
            height: 285px;
            background-color: rgb(237, 239, 244);
            width: 300px;
            border: 1px solid rgba(29, 49, 91, .3);
        }

        .popup-box .popup-head
        {
            background-color: #009688;
            padding: 5px;
            color: white;
            font-weight: bold;
            font-size: 14px;
            clear: both;
        }

        .popup-box .popup-head .popup-head-left
        {
            float: left;
        }

        .popup-box .popup-head .popup-head-right
        {
            float: right;
            opacity: 0.5;
        }

        .popup-box .popup-head .popup-head-right a
        {
            text-decoration: none;
            color: inherit;
        }

        .popup-box .popup-bottom .popup-head-left
        {
            position:absolute; 
            left: 0px; 
            bottom: 0px
            text-decoration: none;
            color: inherit;
        }


        .popup-box .popup-messages
        {
            height: 100%;
            overflow-y: scroll;
        }



    </style>

Answer 1

发布相关部分，你可以理解它。

HTML

 <div class="popup-box chat-popup">

        <div class="popup-head">
            <div class="popup-head-left">name</div>
            <div class="popup-head-right"><a href="javascript:close_popup(\''+ id +'\');">&#10005;</a></div>
            <div style="clear: both"></div>
        </div>
        <div class="popup-messages"></div>
        <div class="popup-bottom-container">
            <div class="popup-bottom">
                <div id="'+ id +'"></div>

                <input type="text" id="field">

            </div>      
        </div>
    </div>

CSS

.popup-bottom
{
    position:absolute; 
    left: 0px; 
    bottom: 10px;
    text-decoration: none;
    color: inherit;
}
.popup-box .popup-messages
{
    height: 200px;
    overflow-y: scroll;
}

在使用js

进行测试之前，最好先用普通的html尝试你的布局

将输入字段插入聊天弹出窗口

1 个答案: