jquery仿淘宝购物车页面商品结算(附源码)
程序员文章站
2023-01-01 13:19:25
1、效果图如下: 2、源码如下: html部分: js部分: css部分: 两个文件,carts.css 和 reset.css cart.css部分: 源码地址: 链接:https://pan.baidu.com/s/1HV1zk3QsJti8yyJ1gNBWnQ 提取码:skhx 如链接过期了私 ......
1、效果图如下:
2、源码如下:
html部分:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>购物车</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./css/carts.css"> </head> <body> <section class="cartmain"> <div class="cartmain_hd"> <ul class="order_lists carttop"> <li class="list_chk"> <!--所有商品全选--> <input type="checkbox" id="all" class="whole_check"> <label for="all"></label> 全选 </li> <li class="list_con">商品信息</li> <li class="list_info">商品参数</li> <li class="list_price">单价</li> <li class="list_amount">数量</li> <li class="list_sum">金额</li> <li class="list_op">操作</li> </ul> </div> <div class="cartbox"> <div class="shop_info"> <div class="all_check"> <!--店铺全选--> <input type="checkbox" id="shop_a" class="shopchoice"> <label for="shop_a" class="shop"></label> </div> <div class="shop_name"> 店铺:<a href="javascript:;">搜猎人艺术生活</a> </div> </div> <div class="order_content"> <ul class="order_lists"> <li class="list_chk"> <input type="checkbox" id="checkbox_2" class="son_check"> <label for="checkbox_2"></label> </li> <li class="list_con"> <div class="list_img"><a href="javascript:;"><img src="./images/1.png" alt=""></a></div> <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖t恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div> </li> <li class="list_info"> <p>规格:默认</p> <p>尺寸:16*16*3(cm)</p> </li> <li class="list_price"> <p class="price">¥980</p> </li> <li class="list_amount"> <div class="amount_box"> <a href="javascript:;" class="reduce resty">-</a> <input type="text" value="1" class="sum"> <a href="javascript:;" class="plus">+</a> </div> </li> <li class="list_sum"> <p class="sum_price">¥980</p> </li> <li class="list_op"> <p class="del"><a href="javascript:;" class="delbtn">移除商品</a></p> </li> </ul> <ul class="order_lists"> <li class="list_chk"> <input type="checkbox" id="checkbox_3" class="son_check"> <label for="checkbox_3"></label> </li> <li class="list_con"> <div class="list_img"><a href="javascript:;"><img src="./images/2.png" alt=""></a></div> <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖t恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div> </li> <li class="list_info"> <p>规格:默认</p> <p>尺寸:16*16*3(cm)</p> </li> <li class="list_price"> <p class="price">¥780</p> </li> <li class="list_amount"> <div class="amount_box"> <a href="javascript:;" class="reduce resty">-</a> <input type="text" value="1" class="sum"> <a href="javascript:;" class="plus">+</a> </div> </li> <li class="list_sum"> <p class="sum_price">¥780</p> </li> <li class="list_op"> <p class="del"><a href="javascript:;" class="delbtn">移除商品</a></p> </li> </ul> <ul class="order_lists"> <li class="list_chk"> <input type="checkbox" id="checkbox_6" class="son_check"> <label for="checkbox_6"></label> </li> <li class="list_con"> <div class="list_img"><a href="javascript:;"><img src="./images/3.png" alt=""></a></div> <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖t恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div> </li> <li class="list_info"> <p>规格:默认</p> <p>尺寸:16*16*3(cm)</p> </li> <li class="list_price"> <p class="price">¥180</p> </li> <li class="list_amount"> <div class="amount_box"> <a href="javascript:;" class="reduce resty">-</a> <input type="text" value="1" class="sum"> <a href="javascript:;" class="plus">+</a> </div> </li> <li class="list_sum"> <p class="sum_price">¥180</p> </li> <li class="list_op"> <p class="del"><a href="javascript:;" class="delbtn">移除商品</a></p> </li> </ul> </div> </div> <div class="cartbox"> <div class="shop_info"> <div class="all_check"> <!--店铺全选--> <input type="checkbox" id="shop_b" class="shopchoice"> <label for="shop_b" class="shop"></label> </div> <div class="shop_name"> 店铺:<a href="javascript:;">卷卷旗舰店</a> </div> </div> <div class="order_content"> <ul class="order_lists"> <li class="list_chk"> <input type="checkbox" id="checkbox_4" class="son_check"> <label for="checkbox_4"></label> </li> <li class="list_con"> <div class="list_img"><a href="javascript:;"><img src="./images/4.png" alt=""></a></div> <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖t恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div> </li> <li class="list_info"> <p>规格:默认</p> <p>尺寸:16*16*3(cm)</p> </li> <li class="list_price"> <p class="price">¥1980</p> </li> <li class="list_amount"> <div class="amount_box"> <a href="javascript:;" class="reduce resty">-</a> <input type="text" value="1" class="sum"> <a href="javascript:;" class="plus">+</a> </div> </li> <li class="list_sum"> <p class="sum_price">¥1980</p> </li> <li class="list_op"> <p class="del"><a href="javascript:;" class="delbtn">移除商品</a></p> </li> </ul> <ul class="order_lists"> <li class="list_chk"> <input type="checkbox" id="checkbox_5" class="son_check"> <label for="checkbox_5"></label> </li> <li class="list_con"> <div class="list_img"><a href="javascript:;"><img src="./images/5.png" alt=""></a></div> <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖t恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div> </li> <li class="list_info"> <p>规格:默认</p> <p>尺寸:16*16*3(cm)</p> </li> <li class="list_price"> <p class="price">¥480</p> </li> <li class="list_amount"> <div class="amount_box"> <a href="javascript:;" class="reduce resty">-</a> <input type="text" value="1" class="sum"> <a href="javascript:;" class="plus">+</a> </div> </li> <li class="list_sum"> <p class="sum_price">¥480</p> </li> <li class="list_op"> <p class="del"><a href="javascript:;" class="delbtn">移除商品</a></p> </li> </ul> </div> </div> <div class="cartbox"> <div class="shop_info"> <div class="all_check"> <!--店铺全选--> <input type="checkbox" id="shop_c" class="shopchoice"> <label for="shop_c" class="shop"></label> </div> <div class="shop_name"> 店铺:<a href="javascript:;">卷卷旗舰店</a> </div> </div> <div class="order_content"> <ul class="order_lists"> <li class="list_chk"> <input type="checkbox" id="checkbox_8" class="son_check"> <label for="checkbox_8"></label> </li> <li class="list_con"> <div class="list_img"><a href="javascript:;"><img src="./images/1.png" alt=""></a></div> <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖t恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div> </li> <li class="list_info"> <p>规格:默认</p> <p>尺寸:16*16*3(cm)</p> </li> <li class="list_price"> <p class="price">¥1980</p> </li> <li class="list_amount"> <div class="amount_box"> <a href="javascript:;" class="reduce resty">-</a> <input type="text" value="1" class="sum"> <a href="javascript:;" class="plus">+</a> </div> </li> <li class="list_sum"> <p class="sum_price">¥1980</p> </li> <li class="list_op"> <p class="del"><a href="javascript:;" class="delbtn">移除商品</a></p> </li> </ul> <ul class="order_lists"> <li class="list_chk"> <input type="checkbox" id="checkbox_9" class="son_check"> <label for="checkbox_9"></label> </li> <li class="list_con"> <div class="list_img"><a href="javascript:;"><img src="./images/1.png" alt=""></a></div> <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖t恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div> </li> <li class="list_info"> <p>规格:默认</p> <p>尺寸:16*16*3(cm)</p> </li> <li class="list_price"> <p class="price">¥480</p> </li> <li class="list_amount"> <div class="amount_box"> <a href="javascript:;" class="reduce resty">-</a> <input type="text" value="1" class="sum"> <a href="javascript:;" class="plus">+</a> </div> </li> <li class="list_sum"> <p class="sum_price">¥480</p> </li> <li class="list_op"> <p class="del"><a href="javascript:;" class="delbtn">移除商品</a></p> </li> </ul> </div> </div> <!--底部--> <div class="bar-wrapper"> <div class="bar-right"> <div class="piece">已选商品<strong class="piece_num">0</strong>件</div> <div class="totalmoney">共计: <strong class="total_text">0.00</strong></div> <div class="calbtn"><a href="javascript:;">结算</a></div> </div> </div> </section> <section class="model_bg"></section> <section class="my_model"> <p class="title">删除宝贝<span class="closemodel">x</span></p> <p>您确认要删除该宝贝吗?</p> <div class="opbtn"><a href="javascript:;" class="dialog-sure">确定</a><a href="javascript:;" class="dialog-close">关闭</a></div> </section> <script src="./js/jquery-1.11.0.min.js"></script> <script src="./js/carts.js"></script> </body> </html>
js部分:
/** * created by administrator on 2019/5/24. */ $(function () { //全局的checkbox选中和未选中的样式 var $allcheckbox = $('input[type="checkbox"]'), //全局的全部checkbox $wholechexbox = $('.whole_check'), $cartbox = $('.cartbox'), //每个商铺盒子 $shopcheckbox = $('.shopchoice'), //每个商铺的checkbox $soncheckbox = $('.son_check'); //每个商铺下的商品的checkbox $allcheckbox.click(function () { if ($(this).is(':checked')) { $(this).next('label').addclass('mark'); } else { $(this).next('label').removeclass('mark') } }); //===============================================全局全选与单个商品的关系================================ $wholechexbox.click(function () { var $checkboxs = $cartbox.find('input[type="checkbox"]'); if ($(this).is(':checked')) { $checkboxs.prop("checked", true); $checkboxs.next('label').addclass('mark'); } else { $checkboxs.prop("checked", false); $checkboxs.next('label').removeclass('mark'); } totalmoney(); }); $soncheckbox.each(function () { $(this).click(function () { if ($(this).is(':checked')) { //判断:所有单个商品是否勾选 var len = $soncheckbox.length; var num = 0; $soncheckbox.each(function () { if ($(this).is(':checked')) { num++; } }); if (num == len) { $wholechexbox.prop("checked", true); $wholechexbox.next('label').addclass('mark'); } } else { //单个商品取消勾选,全局全选取消勾选 $wholechexbox.prop("checked", false); $wholechexbox.next('label').removeclass('mark'); } }) }) //=======================================每个店铺checkbox与全选checkbox的关系/每个店铺与其下商品样式的变化=================================================== //店铺有一个未选中,全局全选按钮取消对勾,若店铺全选中,则全局全选按钮打对勾。 $shopcheckbox.each(function () { $(this).click(function () { if ($(this).is(':checked')) { //判断:店铺全选中,则全局全选按钮打对勾。 var len = $shopcheckbox.length; var num = 0; $shopcheckbox.each(function () { if ($(this).is(':checked')) { num++; } }); if (num == len) { $wholechexbox.prop("checked", true); $wholechexbox.next('label').addclass('mark'); } //店铺下的checkbox选中状态 $(this).parents('.cartbox').find('.son_check').prop("checked", true); $(this).parents('.cartbox').find('.son_check').next('label').addclass('mark'); } else { //否则,全局全选按钮取消对勾 $wholechexbox.prop("checked", false); $wholechexbox.next('label').removeclass('mark'); //店铺下的checkbox选中状态 $(this).parents('.cartbox').find('.son_check').prop("checked", false); $(this).parents('.cartbox').find('.son_check').next('label').removeclass('mark'); } totalmoney(); }); }); //========================================每个店铺checkbox与其下商品的checkbox的关系====================================================== //店铺$sonchecks有一个未选中,店铺全选按钮取消选中,若全都选中,则全选打对勾 $cartbox.each(function () { var $this = $(this); var $sonchecks = $this.find('.son_check'); $sonchecks.each(function () { $(this).click(function () { if ($(this).is(':checked')) { //判断:如果所有的$sonchecks都选中则店铺全选打对勾! var len = $sonchecks.length; var num = 0; $sonchecks.each(function () { if ($(this).is(':checked')) { num++; } }); if (num == len) { $(this).parents('.cartbox').find('.shopchoice').prop("checked", true); $(this).parents('.cartbox').find('.shopchoice').next('label').addclass('mark'); } } else { //否则,店铺全选取消 $(this).parents('.cartbox').find('.shopchoice').prop("checked", false); $(this).parents('.cartbox').find('.shopchoice').next('label').removeclass('mark'); } totalmoney(); }); }); }); //=================================================商品数量============================================== var $plus = $('.plus'), $reduce = $('.reduce'), $all_sum = $('.sum'); $plus.click(function () { var $inputval = $(this).prev('input'), $count = parseint($inputval.val())+1, $obj = $(this).parents('.amount_box').find('.reduce'), $pricetotalobj = $(this).parents('.order_lists').find('.sum_price'), $price = $(this).parents('.order_lists').find('.price').html(), //单价 $pricetotal = $count*parseint($price.substring(1)); $inputval.val($count); $pricetotalobj.html('¥'+$pricetotal); if($inputval.val()>1 && $obj.hasclass('resty')){ $obj.removeclass('resty'); } totalmoney(); }); $reduce.click(function () { var $inputval = $(this).next('input'), $count = parseint($inputval.val())-1, $pricetotalobj = $(this).parents('.order_lists').find('.sum_price'), $price = $(this).parents('.order_lists').find('.price').html(), //单价 $pricetotal = $count*parseint($price.substring(1)); if($inputval.val()>1){ $inputval.val($count); $pricetotalobj.html('¥'+$pricetotal); } if($inputval.val()==1 && !$(this).hasclass('resty')){ $(this).addclass('resty'); } totalmoney(); }); $all_sum.keyup(function () { var $count = 0, $pricetotalobj = $(this).parents('.order_lists').find('.sum_price'), $price = $(this).parents('.order_lists').find('.price').html(), //单价 $pricetotal = 0; if($(this).val()==''){ $(this).val('1'); } $(this).val($(this).val().replace(/\d|^0/g,'')); $count = $(this).val(); $pricetotal = $count*parseint($price.substring(1)); $(this).attr('value',$count); $pricetotalobj.html('¥'+$pricetotal); totalmoney(); }) //======================================移除商品======================================== var $order_lists = null; var $order_content = ''; $('.delbtn').click(function () { $order_lists = $(this).parents('.order_lists'); $order_content = $order_lists.parents('.order_content'); $('.model_bg').fadein(300); $('.my_model').fadein(300); }); //关闭模态框 $('.closemodel').click(function () { closem(); }); $('.dialog-close').click(function () { closem(); }); function closem() { $('.model_bg').fadeout(300); $('.my_model').fadeout(300); } //确定按钮,移除商品 $('.dialog-sure').click(function () { $order_lists.remove(); if($order_content.html().trim() == null || $order_content.html().trim().length == 0){ $order_content.parents('.cartbox').remove(); } closem(); $soncheckbox = $('.son_check'); totalmoney(); }) //======================================总计========================================== function totalmoney() { var total_money = 0; var total_count = 0; var calbtn = $('.calbtn a'); $soncheckbox.each(function () { if ($(this).is(':checked')) { var goods = parseint($(this).parents('.order_lists').find('.sum_price').html().substring(1)); var num = parseint($(this).parents('.order_lists').find('.sum').val()); total_money += goods; total_count += num; } }); $('.total_text').html('¥'+total_money); $('.piece_num').html(total_count); $('#order_num').html(total_count); // console.log(total_money,total_count); if(total_money!=0 && total_count!=0){ if(!calbtn.hasclass('btn_sty')){ calbtn.addclass('btn_sty'); } }else{ if(calbtn.hasclass('btn_sty')){ calbtn.removeclass('btn_sty'); } } } });
css部分:
两个文件,carts.css 和 reset.css
/* 清除内外边距 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ fieldset, lengend, button, input, textarea, /* form elements 表单元素 */ th, td { /* table elements 表格元素 */ margin: 0; padding: 0; } /* 设置默认字体 */ body, button, input, select, textarea { /* for ie */ /*font: 12px/1 tahoma, helvetica, arial, "宋体", sans-serif;*/ font: 12px/1 tahoma, helvetica, arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */ } h1 { font-size: 18px; /* 18px / 12px = 1.5 */ } h2 { font-size: 16px; } h3 { font-size: 14px; } h4, h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ code, kbd, pre, samp, tt { font-family: "courier new", courier, monospace; } /* 统一等宽字体 */ small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ /* 重置列表元素 */ ul, ol { list-style: none; } /* 重置文本格式元素 */ a { text-decoration: none; color: #000; } /*a:hover { text-decoration: underline; }*/ abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */ border-bottom: 1px dotted; cursor: help; } q:before, q:after { content: ''; } /* 重置表单元素 */ legend { color: #000; } /* for ie6 */ fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */ /* 注:optgroup 无法扶正 */ button, input, select, textarea { font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */ } /* 重置表格元素 */ table { border-collapse: collapse; border-spacing: 0; } /* 重置 hr */ hr { border: none; height: 1px; } /* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */ html { overflow-y: scroll; } /* 浮动 */ .fl { float: left } .fr { float: right } /* 清除浮动 */ .clearfix:after { content: " "; display: block; clear: both; visibility: hidden; }
cart.css部分:
html,body{ position: relative; width: 100%; min-height: 950px; } input[type="checkbox"]{ display: none; } label{ position: relative; display: inline-block; z-index: 1; border: 1px solid #b8b8b8; margin-left: 10px; border-radius: 1px; width: 12px; height: 12px; cursor: pointer; } label.mark{ background: url("../images/mark1.png") no-repeat -1px -1px; } a:hover{ color: #ff873e; text-decoration: underline; } .cartmain{ position: relative; width: 1200px; min-width: 1200px; max-width: 1200px; margin: 0 auto; padding: 0px 0px 100px; min-height: 210px; } /*购物车头部*/ .cartmain_hd{ width: 100%; height: 50px; line-height: 50px; color: #3c3c3c; } .cartmain_hd .carttop{ height: 50px; } .cartmain_hd .carttop .list_chk{ width: 80px; text-indent: 30px; } .cartmain_hd .carttop .list_con{ width: 312px; } .cartmain_hd .carttop .list_chk label{ position: absolute; left: 10px; top:19px; margin: 0; } .cartmain_hd .carttop .list_info{ padding: 0; text-indent: 15px; } .cartmain_hd .carttop .list_con{ text-indent: 140px; } .cartbox{ width: 100%; margin-bottom: 15px; } .cartbox .shop_info{ position: relative; width: 100%; height: 38px; background-color: #fff; line-height: 38px; vertical-align: baseline; } .cartbox .shop_info .all_check{ position: relative; float: left; width: 30px; height: 38px; } .cartbox .shop_info .all_check input[type="checkbox"]{ position: absolute; z-index: 0; left: -20px; top: -20px; } .cartbox .shop_info .all_check .shop{ position: absolute; top:13px; } .cartbox .shop_info .shop_name{ float: left; } /*商品列表*/ .cartbox .order_content{ border: 1px solid #ccc; } .cartbox .order_content a{ display: block; } .order_lists{ width: 100%; height: 130px; border-bottom: 1px solid #e7e7e7; } .order_lists:last-child{ border-bottom: none; } .order_lists li{ float: left; height: 100%; } .order_lists .list_chk{ position: relative; width: 50px; } .order_lists .list_chk input[type="checkbox"]{ position: absolute; z-index: 0; left: -20px; top: -20px; } .order_lists .list_chk label{ margin: 20px 0 0 24px; } .order_lists .list_con{ width: 342px; } .order_lists .list_con .list_img{ width: 90px; height: 90px; margin-top: 20px; float: left; } .order_lists .list_con .list_img img{ width: 100%; vertical-align: top; } .order_lists .list_con .list_text{ margin: 20px 0 0 10px; line-height: 18px; width: 200px; float: left; } .order_lists .list_con .list_text a{ color: #3c3c3c; } .order_lists .list_con .list_text a:hover{ color: #ff873e; text-decoration: underline; } .order_lists .list_info{ width: 252px; box-sizing: border-box; padding: 20px 0; } .order_lists .list_info p{ color: #9c9c9c; line-height: 18px; margin-left: 15px; } .order_lists .list_price{ width: 130px; } .order_lists .list_price .price{ margin-top: 20px; line-height: 18px; font-family: verdana,tahoma,arial; color: #3c3c3c; font-weight: bold; } .order_lists .list_amount{ width: 120px; } .order_lists .list_amount .amount_box{ margin-top: 20px; width: 77px; height: 25px; position: relative; } .order_lists .list_amount .amount_box input{ width: 39px; height: 15px; line-height: 15px; border: 1px solid #aaa; color: #343434; text-align: center; padding: 4px 0; background-color: #fff; z-index: 2; position: absolute; left: 18px; float: left; } .order_lists .list_amount .amount_box a{ float: left; height: 23px; width: 17px; border: 1px solid #e5e5e5; background: #f0f0f0; text-align: center; line-height: 23px; color: #444; position: absolute; top:0; } .order_lists .list_amount .amount_box a:hover{ border-color: #ff873e; text-decoration: none; color: #ff873e; z-index: 3; } .order_lists .list_amount .amount_box .reduce{ left: 0; } .order_lists .list_amount .amount_box .resty{ color: #cbcbcb; } .order_lists .list_amount .amount_box .resty:hover{ border-right: none; border-color: #e5e5e5; text-decoration: none; color: #cbcbcb; } .order_lists .list_amount .amount_box .plus{ border-left-color: transparent; right: 0; } .order_lists .list_sum{ width: 140px; } .order_lists .list_sum .sum_price{ line-height: 18px; margin-top: 20px; font-family: verdana,tahoma,arial; color: #ff0000; font-weight: bold; } .order_lists .list_op{ width: 164px; } .order_lists .list_op .del{ margin-top: 20px; line-height: 18px; } /*底部总计算价*/ .bar-wrapper{ width: 1200px; height: 50px; position: fixed; bottom: -1px; z-index: 99; background: #e5e5e5; } .bar-wrapper .bar-right{ float: right; color: #3c3c3c; } .bar-wrapper .bar-right strong{ color: #f40; } .bar-wrapper .bar-right .piece{ float: left; min-width: 110px; margin-right: 20px; height: 50px; line-height: 50px; } .bar-wrapper .bar-right .piece .piece_num{ display: inline-block; padding: 0 10px; font-weight: 700; font-size: 18px; font-family: tohoma,arial; } .bar-wrapper .bar-right .totalmoney{ float: left; min-width: 100px; height: 50px; line-height: 50px; } .bar-wrapper .bar-right .totalmoney .total_text{ float: right; font-weight: 400; font-size: 20px; font-family: arial; vertical-align: middle; margin-right: 10px; margin-left: 15px; } .bar-wrapper .bar-right .calbtn{ float: left; } .bar-wrapper .bar-right .calbtn a{ display: block; width: 120px; height: 50px; color: #fff; background: #b0b0b0; cursor: not-allowed; font-size: 22px; letter-spacing: 5px; text-decoration: none; line-height: 50px; text-align: center; border-radius: 2px; } .bar-wrapper .bar-right .calbtn a.btn_sty{ background: #f40; cursor: pointer; } /*自己定义的模态框*/ .model_bg{ position: absolute; top:0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,.6); z-index: 999; display: none; } .my_model{ position: fixed; display: none; top:50%; left: 50%; margin-top: -50px; margin-left: -200px; z-index: 9999; width: 360px; height: 120px; border: 1px solid #aeaeae; border-radius: 3px; padding: 20px; background: #fff; } .my_model .title{ font-size: 14px; color: #3c3c3c; font-weight: 700; margin-bottom: 20px; } .my_model .title .closemodel{ float: right; cursor: pointer; } .my_model p{ line-height:16px; } .my_model .opbtn{ margin-top: 20px; } .my_model .opbtn a{ width: 58px; height: 28px; line-height: 28px; text-align: center; -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; border-radius: 1px; display: inline-block; margin-right: 10px; font-weight: 700; } .my_model .dialog-sure{ background: #52a0e5; color: #fff; border: 1px solid #52a0e5; } .my_model .dialog-close{ background: #fff; border: 1px solid #d9d9d9; color: #3c3c3c; }
源码地址:
链接:https://pan.baidu.com/s/1hv1zk3qsjti8yyj1gnbwnq 提取码:skhx
如链接过期了私信或留言,看到会第一时间回复
干货分享,记得留个赞再走哦~