弹出在线留言框

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_32601201/article/details/50337093

<div class="pull-right"  style="position: fixed;top: 300px;right: 0px;">
        <a  href="javascript:openOnlineMessage();" class="btn btn-primary">
            <span class="glyphicon glyphicon-plus">给我们留言</span>
        </a>
</div>
<div id=back style="display:none; POSITION:fixed; left:0; top:0; width:100%;height:100%; background-color:gray;z-index:70;opacity:0.1"></div>
<div id=win style="overflow:auto;border-radius:20px;display:none; POSITION:fixed; left:50%; top:50%; width:600px; height:400px; margin-left:-300px; margin-top:-200px;background-color:white; border:3px solid #394557;text-align:center;z-index:90;opacity:1 " >
        <div style="background-color:#BFCFFE;width:600px; height:50px;float: left;vertical-align: middle;"><span style="font-size:20px;font-weight:900;color:white;vertical-align: middle;">在线留言</span></div>
        <table style="width:80%;height:60%;margin: 0px auto;">
            <tr>
                <td> <span style="font-size: 15px;font-weight:500;">留言主题:</span></td>
                <td><input type="text" class="form-control" id="title" name="title" maxlength="28" style="width:300px;height:25px;" placeholder="最大输入长度为28" onkeyup="replaceSpace(this)" onkeydown="replaceSpace(this)"></td>
            </tr>
            <tr>
                <td><span style="font-size: 15px;font-weight:500;">留言内容:</span></td>
                <td><textarea rows="5" cols="40" id="content" name="content" maxlength="120" placeholder="最大输入长度为120" style="width:300px;" class="form-control"></textarea></td>
            </tr>
        </table>
        <button style="background-color:#EDE9CA;margin-left:50px;" type="button" class="btn btn-success" id="butt1" onclick="saveOnlineMessage()" ><span style="color:black;font-size: 12px;">保存留言</span></button>
        <button style="position: absolute;bottom:5px;right:5px;width:30px;height:30px;border-radius:100px;border:2px solid gray;background-color:white; vertical-align: middle;text-align: center;" type="button" onclick="closeOnlineMessage()" onmouseover="buttonMouseOver1()" onmouseout="buttonMouseOut1()"><span id="mouse1" style="font-size:15px;font-weight:600;">X</span></button>
</div>
<script type="text/javascript">
    function openOnlineMessage(){
       document.getElementById("win").style.display="";
       document.getElementById("back").style.display="";
    }
    function closeOnlineMessage(){
       document.getElementById("win").style.display="none";
       document.getElementById("back").style.display="none";
       $("#title").val("");
       $("#content").val("");
    }
    function buttonMouseOut1() {
        document.getElementById("mouse1").style.color="";
        document.getElementById("mouse1").style.fontWeight=600;
    }
    function buttonMouseOver1() {
        document.getElementById("mouse1").style.color="#446294";
        document.getElementById("mouse1").style.fontWeight=900;
    }

    function replaceSpace(obj){
           obj.value = obj.value.replace("%","")
         }

     function saveOnlineMessage(){
         if($("#title").val()==''){
             alert('请填写标题！');
             return false;
         }
            if($("#content").val()==''){
             alert('请留下你想说的话！');
             return false;
         }
            var title=$("#title").val();
            var content=$("#content").val();
            $.ajax({
                type:'post',
                url:'${dynamicDomain}/home/index/saveOnlineMessage',
                dataType:'json',
                data:"title="+ title+"&content="+content,
                success:function(msg){
                    if(msg.result){
                        alert("留言成功！");
                        document.getElementById("butt1").style.display='none';
                    }
                 }
            });
        }
</script>