jq 弹窗制作相关问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq 弹窗制作相关问题相关的知识，希望对你有一定的参考价值。
类似于点击评论按钮->弹出登录&注册框->填完信息点击注册->弹窗报错用户名非法请换一个。
我之前使用magnificPopup发现只能同时存在一个弹窗，如果在弹窗上再添加弹窗会覆盖之前的。
那么问题来了：
有没有哪种插件能够实现在弹窗上点击按钮再弹出一个窗口。
自己写个简单的
需要弹框显示的放在页面中，需要弹出的时候定位显示即可，如有需要可加一个遮罩层 参考技术B 思路是这样的：自己写一个DIV， 然后设置显示的问题， 在DIV的里面再加上自己要显示的内容， 在需要的时候显示该DIV
jq制作tab栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * margin: 0;padding: 0; ul list-style: none; .box width: 1000px;height: 475px;margin: 100px auto; .tab border: 1px solid rgba(205, 211, 211, 0.87); height: 36px;width: 320px; .tab-item width: 80px;height: 34px;float: left;line-height: 34px; text-align: center;border-top: 3px solid white; /* 3px是为了去掉和hover状态下3pxborder-top的变化过程 */ span padding-left: 5px; color: rgba(205, 211, 211, 0.87); .tab-item:hover border-top: 3px solid red; .active border-top: 3px solid red; .products border: 1px solid rgba(205, 211, 211, 0.87); .products .main display: none; .products .selected display: block; </style> </head> <body> <div class="box"> <ul class="tab"> <li class="tab-item active">国际大牌<span>|</span></li> <li class="tab-item">国妆名牌<span>|</span></li> <li class="tab-item">清洁用品<span>|</span></li> <li class="tab-item">男士精品</li> </ul> <div class="products"> <div class="main selected"> <a href="###"><img src="images/guojidapai.jpg" /></a> </div> <div class="main"> <a href="###"><img src="images/guozhuangmingpin.jpg" /></a> </div> <div class="main"> <a href="###"><img src="images/qingjieyongpin.jpg" /></a> </div> <div class="main"> <a href="###"><img src="images/nanshijingpin.jpg" /></a> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> $(function() $("li").mouseenter(function() $(this).addClass("active"); $(this).siblings().removeClass("active"); // 给li注册事件，this添加active同时去掉其他相邻兄弟的active var idx=$(this).index();//当前的索引放在idx中 $(".main").eq(idx).addClass("selected").siblings().removeClass("selected"); //.main中当前索引添加selected，其他去掉selected ); ); </script> </body> </html>
以上是关于jq 弹窗制作相关问题的主要内容，如果未能解决你的问题，请参考以下文章