JQ模态框+简易评价

EvaCourse:function(){//课程评价

        var p=[‘不好‘,‘一般‘,‘不错‘,‘很好‘,‘非常好‘],
            $mask=$(".mask"),//遮罩
             $starBox=$("#star-box"),//评价触发盒子
             $modalBox=$(".modal-box"),//弹出框
             $pText=$("#text-info"),//‘不好‘,‘一般‘,‘不错‘,‘很好‘,‘非常好‘ 显示信息
             $subtn=$("#star-btn"),//提交按钮
             $inputTxt=$("#input-txt"),//输入文本框
             $starList=$("#star-list");//评论星星列表

        //点击评价星星、显示遮罩和评价框
        $starBox.click(function(){
            openBox();
        });

        $mask.click(function(){
            closeBox();
        });

        $subtn.click(function(){
            closeBox();
        });

        //点击评价星星切换对应评价
        $starList.on(‘click‘,‘li‘,function(){
            $index=$(this).index();
            console.log($index)
            switch($index){
                case 0:
                    $("#star-list>li").removeClass(‘active‘).eq($index).addClass(‘active‘);
                    $pText.text(p[$index]);
                    break;
                case 1:
                    removeClass();
                    $("#star-list>li:lt(2)").addClass(‘active‘);
                    $pText.text(p[$index]);
                    break;
                case 2:
                    removeClass();
                    $("#star-list>li:lt(3)").addClass(‘active‘);
                    $pText.text(p[$index]);
                    break;
                case 3:
                    removeClass();
                    $("#star-list>li:lt(4)").addClass(‘active‘);
                    $pText.text(p[$index]);
                    break;
                case 4:
                    removeClass();
                    $("#star-list>li:lt(5)").addClass(‘active‘);
                    $pText.text(p[$index]);
                    break;
            }
        });
        function removeClass(){
                $("#star-list>li").removeClass(‘active‘);
        }
        function openBox(){//打开遮罩和评价框
            $mask.show();
            $modalBox.show();
        }
        function closeBox(){//关闭遮罩和评价框
            $mask.hide();
            $modalBox.hide();
        }
    }
时间: 2024-08-29 20:27:59

JQ模态框+简易评价的相关文章

[jQ]使用jQuery将多条数据插入模态框的方法

------------------------------------------------------------------------------------------------------ //Bootstrap模态框(局部) <div class="modal fade" id="orderDetail"> <div class="modal-dialog"> <div class="mo

模态框的理解 ,jQ: loading,进度条, 省级联动 ,富文本编辑器 表单验证 插件

模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框 加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: 开始     $('#box').ajaxStart() 多个ajax共享一个Start 发送 .ajaxSend() 成功 .ajaxSuccess() 完成 . ajaxComplete() 完成后有错误 .ajaxError() 停止 .ajaxStop()多个ajax共享一个Stop Nprogress:进度条引入 c

[javascript]编码&amp;i字符串格式化&amp;nput历史记录&amp;清空模态框

js中编码问题 https://www.haorooms.com/post/js_escape_encodeURIComponent 我在前端js添加时候创建dom时候,有汉字,发现是乱码就研究了下 针对字符编码 javascript:escape("\u6625\u8282"); //输出 "%u6625%u8282" javascript:unescape("%u6625%u8282"); //输出 "春节" javasc

DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; }

iframe中的模态框遮罩父窗口原理

关键点: css的position定位为fixed或absolute css的z-index, 最顶层的值最大如遮罩层为0那么弹出框最好是大于等于1的整数,总之记住弹出层要比遮罩的z-index值大就行 如果弹出模态框的使用场景没有嵌套在iframe或frame中掌握以上两点加上点css功底就可以写出漂亮的模态框了 特殊场景会涉及到跨域问题,可以在父页面和子页面分别设置<script type="text/javascript">document.domain="

bootstarp 模态框大小尺寸的控制

默认: <!-- 模态框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog">

jQuery点击弹出层,弹出模态框,点击模态框消失

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 <!DOCTYPE html>

用vue实现模态框组件

基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 <template> <div class="modal" v-show="show" transition="fade"> <div class="modal-dialog"> <div cla

关于bootstrap 在MVC里 模态框里加载iframe页面做编辑的时候

前台代码 <div class="modal fade" id="myModal" tabindex="-1" role="dialog"     aria-labelledby="myModalLabel" aria-hidden="true" >    <div class="modal-dialog" style="width:830