JavaScript+CSS实现模态框效果_javascript技巧_

本文实例为大家分享了JavaScript+CSS实现模态框效果的具体代码，供大家参考，具体内容如下

发现的问题

1）鼠标按下后拖动的瞬间，光标会脱离模态盒子跑到外面
2）鼠标弹起事件不起作用

解决的思路

首先是因为代码里有用到offsetLeft和offsetTop这两个属性，所以考虑是不是模态框的定位出现了问题 。

又：设置关闭标签设置了绝对定位，那么loginBox作为其父级元素我将其设置为相对定位。

各个类型定位的介绍：

1.静态定位: position: static 默认,也就是文档流定位,元素的显示位置与源码顺序一致（不是定位元素）

2.相对定位: position: relative;相对于该元素在文档流中的原始位置进行偏移

3.绝对定位: position: absolue;相对于它的祖先中离它最近的”定位元素”的位置发生偏移（如果祖先元素中不存在定位元素,它就参考根元素(html)进行定位）

4.固定定位: position: fixed; 是绝对定位的一个特例,它始终相对于html定位

定位元素：只要这个元素中有position: relative;或者 position:absolute;就称为定位元素

由上可看出，相对定位，指的是相对于该元素在文档流中的原始位置进行偏移而不是相对于html，所以loginBox不能设置为相对定位。可以用绝对定位或固定定位，两者均可。

另外，需要注意使用top、left定位后，则margin-top、margin-left产生同方向相加的位移效果，margin-bottom、margin-righ产生无任何效果的margin空间。所以保留margin: 100px auto;时效果还是会有些奇怪，注释起来了就好了。

代码

                         
点击，弹出登录框
     
         关闭         
登录会员
         
用户名：
         
登录密码：
         登录     
     

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！