jq之对话框制作

最新推荐文章于 2023-04-10 08:53:48 发布
最新推荐文章于 2023-04-10 08:53:48 发布
阅读量292 收藏 1
点赞数 1
分类专栏： 前端知识 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjy170314/article/details/91046965
版权

简单html代码，没有样式，用的时候根据自己写的习惯写样式，js部分可以互通

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/views/mobile/skin/css/style.css" />
    <link rel="stylesheet" type="text/css" href="/views/mobile/skin/css/index.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="blank">
	<meta name="format-detection" content="telephone=no, email=no">
	<meta name="msapplication-tap-highlight" content="no">
    <title><{config_item('website_title')}></title>
    <script type="text/javascript" src="/views/mobile/skin/js/public.js"></script>
    <style>
    .back{color: #fff !important;}
    .header{position: fixed; background: #082d47; z-index: 10;}
    .customer{color: #fff;position: absolute; right: 5%;}
    .teamsbox{padding-top: 0.8rem; width: 100%; min-height: 100vh; background: url('/views/mobile/skin/pageImg/payforreturnbg.png') no-repeat;background-size: 100% 100%; box-sizing: border-box; margin-top: 0 !important;}
    .head-cont-arrow,.bottom-arrow{z-index: 1 !important; margin-bottom: 0 !important;}
    </style>
</head>
<body>
    <div class="wrap">
        <section class="header">
            <a href="<{site_url("/<{get_web_type()}>/member")}>" class="iconfont icon-back back"></a>
            <span>客服中心</span>
            <a href="<{site_url("/<{get_web_type()}>/member/balance/gonggao")}>" class="customer">
                通知消息
            </a>
        </section>
   

        <div class="teamsbox distance">
            <div class="head-cont-arrow contentbox">
                <div class="leftArrow">
                    <img src="/views/mobile/skin/pageImg/lefttoparrow.png" alt="">
                </div>
                <div class="rightArrow">
                    <img src="/views/mobile/skin/pageImg/righttoparrow.png" alt="">
                </div>
            </div>

            <div class="extendCont">
                <div class="newsListCont">
                    <div class="converCont">
                        <!-- <div class="custItem contentbox">
                            <img src="/views/mobile/skin/pageImg/serverRobot.png" alt="">
                            <div class="Conversation">
                                
                            您好，我是您的智能助理哈哈。
                            您是否要咨询以下几个问题？
                                                    
                            </div>
                        </div>

                        <div class="custItem contentbox customerBox">
                            
                            <div class="Conversation">
                                    你好,请问…
                            </div>
                            <img src="/views/mobile/skin/pageImg/customer.png" alt="">
                        </div> -->

                    </div>

                    <div class="converBtn contentbox">
                        <input type="text" id="converInp"  >
                        <span style="display: inline-block;width: 0.02rem; height: 100%; background: #DADADA;"></span>
                        <button class="sendMsg">发送</button>
                    </div>
                </div>
            </div>

            <div class="bottom-arrow contentbox">
                <div class="leftArrow">
                    <img src="/views/mobile/skin/pageImg/lefttoparrow.png" alt="">
                </div>
                <div class="rightArrow">
                    <img src="/views/mobile/skin/pageImg/righttoparrow.png" alt="">
                </div>
            </div>

        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="/views/mobile/skin/js/jquery-2.1.1.min.js"></script>
<script>
$(function(){
   
    // 点击发送事件
    $('.sendMsg').click(function(){
        // 获取输入框的内容
        var val =  $('#converInp').val()
        console.log(val)
        // 用户信息添加
        if(val == ''){return false}
        var listItem = `
                    <div class="custItem contentbox customerBox">
                        <div class="Conversation">
                        `+val+`
                        </div>
                        <img src="/views/mobile/skin/pageImg/customer.png" alt="">
                    </div>
                `
        $('.converCont').append(listItem);
        $('#converInp').val('');
        $('.converCont').scrollTop($('.converCont')[0].scrollHeight)
        // 将数据传入后台存储，后台并返回相应回答信息
        $.ajax({
            type:'POST',
            url:"",         //后台接受数据地址
            data:{cusInpTxt:val},
            dataType:"json",
            success:function(res){
                // 返回的数据，也就是客服机器人的回答
                var msg = JSON.parse(data);
                var serverMsg =  `
                    <div class="custItem contentbox">
                        <img src="/views/mobile/skin/pageImg/serverRobot.png" alt="">
                        <div class="Conversation">
                            `+msg+`
                        </div>
                    </div>
                    `
                    $('.converCont').append(serverMsg);
                    $('.converCont').scrollTop($('.converCont')[0].scrollHeight)
            },
            error:function(){
                alert('网络忙请重试！')
            }
        })

    })

    // 客服机器人事件     msg是后台传入客服机器人说话的内容
    // var msg = '您好，我是您的智能助理小T,请问有什么可以帮助你的么？';
    // var serverMsg =  `
    //                 <div class="custItem contentbox">
    //                     <img src="/views/mobile/skin/pageImg/serverRobot.png" alt="">
    //                     <div class="Conversation">
    //                         `+msg+`
    //                     </div>
    //                 </div>
    //                 `
    // $('.converCont').append(serverMsg);
})

</script>

 

hjy170314
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现聊天对话框
10-15
主要为大家详细介绍了jQuery实现聊天对话框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
对话框界面制作
05-31
本程序是个简单的小程序，用于制作对话框界面制作，运行不错简单易学，适合初学者
jq 对话框
weixin_42199478的博客
07-15 240
jq 对话框代码jscss使用效果 代码 js var _Alert_Wintop=true;//是否在最顶层显示 var _Alert_Top;//css top属性 /* 输入对话框 _title=标题 t1=的一个文本框的提示文字 t2=的二个文本框的提示文字 ok=确定按钮执行方法，必传 回调参数1 输入值数组 */ $.alertInput2 = function (_title,t1,t2, ok) { if (!ok) { console.error('没有确定事件
jQuery对话框
青青河边草
12-19 984
jQuery警告/确认/提示弹出对话框效果（替换传统JavaScript下的提示框） 基本示例 警告提示框（Alert） jAlert('这是一个可自定义样式的警告对话框', '警告对话框'); 确认对话框（Confirm） jConfirm('你确定这么做吗?', '确认对话框', function(r) { jAlert('是否确定 ' + r, '确定内容')
jQuery实现简易聊天框
11-21
本文实例为大家分享了jQuery实现简易聊天框的具体代码，供大家参考，具体内容如下 效果： CSS代码： body{ margin: 0; } .kuan{ height:550px; width: 650px; background-color: #ccc; margin: 80px auto; } .header{ width: 100%; height: 35px; background-color: #00f; } .chatBody{ width: 100%; height: 70%; overflow:auto; } .footer{ w
鼠标点击弹窗2_jq效果_
09-30
在IT行业中，jQuery（通常简称为jq）是一种广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。本话题主要围绕"鼠标点击弹窗"的jQuery效果展开，这是一个常见的用户界面...
Jquery实现页面加载时弹出对话框代码
12-08
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及动画制作等任务。在标题提到的场景中，我们看到一个简单的jQuery实现，用于在页面加载完成时弹出一个对话框，向用户显示欢迎信息...
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
01-19
多的不说了，直奔主题，分享一个放大效果的popup dialog，项目中可以根据自己的需求来写css，我打算复用到metro风格的site上去。 看起来动画效果还是比较cool的，如果加上了处理后的效果更佳： 代码如下: <...
jquery jq
07-28
在Web开发领域，jQuery是一个不可或缺的JavaScript库，它极大地简化了JavaScript的DOM操作，事件处理以及动画制作等任务。jQuery以其简洁、易用的API，使得开发者能够快速构建功能丰富的交互式网页。而jQuery UI则是...
JQ-Address-Select-增加按钮点击
04-16
首先，jQuery（JQ）是JavaScript的一个库，它简化了DOM操作、事件处理、动画制作以及Ajax交互。在本项目中，JQ用于处理页面元素的动态交互，尤其是当用户点击增加按钮时触发的地址选择过程。 地址选择器通常由三个...
漂亮的jQuery模态消息对话框插件SweetAlert2
06-10
一套jQuery模态消息对话框插件SweetAlert2，用于替代浏览器默认的弹出对话框，它提供各种参数和方法，支持嵌入图片，背景，HTML标签等，并提供5种内置的情景类，功能非常强大。
Jq对话框插件
weixin_34174422的博客
07-31 106
http://layer.layui.com/
jQuery UI 实例 - 对话框（Dialog）
unber的博客
04-10 2074
在一个交互覆盖层中打开内容。如需了解更多有关 dialog 部件的细节，请查看 API 文档。
jQuery各种对话框
苦涩精灵的博客
04-22 2153
用到了jQuery插件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/new_file.css" /> <link rel="st...
自定义对话框的制作
lzqjfly的专栏
04-28 2413
1，防开源中国的登陆对话框。效果图如下 2，该对话继承Activity来实现，只有点击返回和关闭图标才能关闭对话框。 3，主要代码，LoginDialog.java 该类为登陆的相关操作，具体的实现更具自己的业务逻辑来操作。 public class LoginDialog extends Activity{ @Override protected v
jQuery 消息提示框
　対苩
12-23 224
[code="html"] 下次不在提示 您有x个未读消息 function showmsg() { //去查有几个未读消息 $.post("url",function(x){ if (x>0) { $("#...
jQuery弹窗对话框插件
ICode联盟
05-24 529
下载地址 基于jQuery弹窗对话框插件。该jquery弹窗插件可以用于做提示框，对话框，确认框等，兼容ie8，并提供点击按钮后的回调函数调用方法，非常好用的jQuery弹出插件。 dd:
jQuery插件之对话框插件
03-26 2061
在页面开发过程中，经常要与用户进行交互，例如在提交表单时，如果文本框(text)中内容为空，需要提醒用户输入内容，一般的做法是使用传统的javascript语言中的alert()函数弹出一个信息窗口；另外，在删除某项记录时，也需要告知用户确定，可用javascript语言中的confirm()函数，虽然这两个函数都可以实现相应的功能，但没有动画效果，功能单一，用户体验差。在jQuery UI中，通
简单的聊天窗口php可运行,jQuery实现简易聊天框
weixin_29442031的博客
03-31 222
本文实例为大家分享了jQuery实现简易聊天框的具体代码，供大家参考，具体内容如下效果：CSS代码：body{margin: 0;}.kuan{height:550px;width: 650px;background-color: #ccc;margin: 80px auto;}.header{width: 100%;height: 35px;background-color: #00f;}.ch...
jq制作1号店网站网页特效
最新发布
11-29
1号店网站是一家知名的电商网站，为了提升用户体验，他们使用了jQuery来制作一些特效。 首先，他们使用了jQuery制作了一些动态的导航菜单特效。当用户鼠标悬停在导航菜单上时，会出现动画效果，让用户更容易找到他们想要的商品分类。 其次，他们还利用jQuery实现了商品列表的动态加载特效。当用户滚动页面到底部时，会自动加载更多的商品信息，而不用用户手动点击“加载更多”按钮。这样能够提高用户浏览商品的效率。 另外，1号店网站还利用jQuery实现了一些交互式的商品展示特效。例如，在商品详情页面，用户可以通过点击图片或按钮来切换商品的颜色或型号，这些交互效果都是用jQuery实现的。 不仅如此，1号店网站还利用jQuery实现了一些用户反馈的特效。例如，在用户提交订单时，会用jQuery弹出一个提示框，告诉用户订单是否提交成功，或者是否还有哪些信息需要完善。 总的来说，1号店网站利用jQuery制作了很多网页特效，这些特效不仅提升了用户体验，还增加了网站的交互性和吸引力，使得用户更愿意在这个网站上购物。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值