js实现拖动模态框效果
本文实例为大家分享了js实现拖动模态框效果的具体代码,供大家参考,具体内容如下
1.实现效果:
文章图片
点击链接,弹出模态框。点击关闭,关闭模态框。
点击标题部分,可以随意移动模态框的位置。
主要是获取鼠标位置。
【js实现拖动模态框效果】2.思路:
文章图片
3.代码:
拖动模态框 - 锐客网 body {padding: 0; margin: 0; }.login {display: none; position: fixed; top: 50%; left:50%; box-sizing:border-box; width:400px; height: 200px; background-color: pink; box-shadow: 0px 0px 20px #ddd; z-index: 9999; transform: translate(-50%, -50%); /* 让一个固定定位的盒子 垂直居中 */ }h4 {text-align: center; line-height: 70px; }form {text-align: center; margin-left: 40px; }a {text-decoration: none; text-align: center; }.finish {position: absolute; top:-15px; right:-15px; width: 30px; height: 30px; border: 1px solid white; border-radius: 50%; background-color: white; font-size: 10px; line-height: 30px; }.login-bg {display: none; width: 100%; height: 100%; position: fixed; top:0px; left: 0px; background-color: rgba(0,0,0,0.3); }.title {width: 400px; height: 50px; cursor: move; margin-top: -20px; height: 70px; }点击,弹出登录框关闭登录会员
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- 用JS实现贪吃蛇游戏
- 用js实现简单轮播图
- js实现模态框的拖拽效果
- JS实现拖动模态框案例
- javascript实现表单隔行变色
- javascript实现点击按钮变色
- 基于分布式系统的7种唯一ID实现方案
- 纯css实现动态渐变背景,一分钟学会
- javascript实现倒计时小案例
- SpringBoot+RabbitMQ|SpringBoot+RabbitMQ 实现死信队列的示例