JavaScript简单实现弹出拖拽窗口(二)


Posted in Javascript onJune 17, 2016

接上文JavaScript简单实现弹出拖拽窗口(一)进行学习。 
下面开始具体分析代码部分:
 首先我们先确认下结构:
 悬浮窗口:初始不可见。包括标题栏和内容栏,标题栏内有标题和关闭按钮。
 遮罩层:初始不可见。用于设置弹出悬浮窗口时的半透明背景,
 按钮:用于点击弹出悬浮窗口。 

下面进行详细解释
 1、要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute);   

/*登录浮层组件*/
.popup{ 
 display:none;            /*初始隐藏*/
 width: 380px;
 height: auto;            /*高度自由,因为不确定,内容多少。*/
 border: 1px solid #D5D5D5;
 background: #fff;           /*窗口内容不透明,背景为白色*/ 
 box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
 -moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.25);
 -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.25);    /*内容窗口带阴影*/
 border-radius: 8px;           /* 所有角都使用半径为8px的圆角,此属性为CSS3标准属性 */ 
 -moz-border-radius: 8px;         /* Mozilla浏览器的私有属性 */ 
 -webkit-border-radius:8px;         /* Webkit浏览器的私有属性 */ /*窗口圆角*/
 position: absolute;
 top: 100px;
 left: 100px;            /*绝对定位*/
 z-index: 9000; 
 }

2.给窗口添加标题栏,同时将标题栏的鼠标光标设置为拖动(move)形状(在chrome中拖动的时候,光标会变成文字光标,松开鼠标键后恢复),这里需要对标题栏的左上角和右上角设置一下圆角。 

/*标题栏区域*/
.popup_title{
 height: 48px;
 line-height: 48px;           /*使垂直居中*/
 padding:0px 20px;           /*使距离左边有一定距离*/    
 background: #f5f5f5;          /*背景颜色*/
 border-bottom: 1px solid #efefef;       /*底边框*/
 border-radius:8px 8px 0 0;         /* 左上角和右上角使用半径为5px的圆角,此属性为CSS3标准属性 */ 
 -moz-border-radius: 8px 8px 0 0;       /* Mozilla浏览器的私有属性 */ 
 -webkit-border-radius:8px 8px 0 0;       /* Webkit浏览器的私有属性 */ /*窗口圆角*/
 color: #535353;
 font-size: 16px;           /*字体颜色和字体大小*/
 cursor: move;            /*可移动样式*/
 -moz-user-select: none;          /* Firefox all */
 -webkit-user-select: none;         /* Chrome all / Safari all /opera15+*/ 
 -ms-user-select: none;          /*IE10*/
 -khtml-user-select: none;         /*早期浏览器*/
 user-select:none;
 -o-user-select: none;          /* 以上两个属性目前并未支持,写在这里为了减少风险 */ 
 }

这里有几个知识点需要理解:
 1. css3(border-radius)边框圆角
 border-radius 是一种缩写方法。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现:
 1.只有一个值,那么 top-left、top-right、bottom-right、bottom-left 四个值相等。
 2.有两个值,那么 top-left 等于 bottom-right,并且取第一个值;top-right 等于 bottom-left,并且取第二个值
 3.有三个值,其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。
 4.有四个值,其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。
 支持的浏览器: 

JavaScript简单实现弹出拖拽窗口(二)

2.  cursor: move

cursor 属性规定所显示的指针(光标)的类型。
 属性值为move时,表示此光标所指的对象是可以移动的,通常为一个交叉箭头,如图。

JavaScript简单实现弹出拖拽窗口(二)

3.user-select:用来控制内容的可选择性
 auto——默认值,用户可以选中元素中的内容
 none——用户不能选择元素中的任何内容
 text——用户可以选择元素中的文本
 element——文本可选,但仅限元素的边界内(只有IE和FF支持)
 需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整
 user-select说明:
 设置或检索是否允许用户选中文本。
 (1)IE6-9不支持该属性,但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果;Safari和Chrome也支持该标签属性;
 (2)直到Opera12.5仍然不支持该属性,但和IE6-9一样,也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果;
 (3)unselectable 的另一个值是 off;除Chrome和Safari外,在其它浏览器中,如果将文本设置为 -ms-user-select:none;,则用户将无法在该文本块中开始选择文本。
 不过,如果用户在页面的其他区域开始选择文本,则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本.
 分析以下代码(注意:此代码及此代码的分析结果来自w3help):

<!DOCTYPE html>
<html>
<body>
  <div unselectable="on" style="background:#CCC;" >unselectable=on </div>
  <br/>
  <div style="background:#CCC;-webkit-user-select:none;" >-webkit-user-select:none;</div>
  <br/>
  <div style="background:#CCC;-moz-user-select:none;" >-moz-user-select:none;</div>
  <br/>
  <div style="background:#CCC;" onselectstart="return false;" >onselectstart="return false;"</div>
</body>
</html>

在各浏览器中效果如下:

JavaScript简单实现弹出拖拽窗口(二)

注1:可以禁止内容选中。
注2:没有禁止内容选中。
 可见,禁止内容选中的方法如下:
 IE 给标签设置 unselectable= "on" ,设置标签方法 onselectstart="return false;"
 Firefox 给标签设置私有样式 -moz-user-select:none 。
 Chrome Safari 给标签设置私有样式 -webkit-user-select:none ,设置标签方法 onselectstart="return false;"。
 Opera 给标签设置 unselectable= "on" 

 解决方案
 给标签设置样式 -moz-user-select:none ;-webkit-user-select:none 同时标签设置 unselectable= "on" ,保证各浏览器都可以禁止内容选中。
 如案例中给悬浮差弹出窗的标题栏设置禁止选中样式,可以这样设置:

<div class="popup_title" id="popup_title" unselectable= "on" >
 登录
  <a href="javascript:hidepopup();" class="popup_closebutton"></a>
</div>
.popup_title{
 -moz-user-select: none;          /* Firefox all */
 -webkit-user-select: none;         /* Chrome all / Safari all /opera15+*/ 
 -ms-user-select: none;          /*IE10*/
 -khtml-user-select: none;         /*早期浏览器*/
 user-select:none;
 -o-user-select: none;          /* 以上两个属性目前并未支持,写在这里为了减少风险 */ 
}

 注意:本文为原创, 地址:http://www.cnblogs.com/wanghuih/p/5576910.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
JS中递归函数
Jun 17 #Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 #Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 #Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 #Javascript
聊一聊JS中this的指向问题
Jun 17 #Javascript
json实现添加、遍历与删除属性的方法
Jun 17 #Javascript
confirm确认对话框的实现方法总结
Jun 17 #Javascript
You might like
星际争霸中的对战模式介绍
2020/03/04 星际争霸
php生成N个不重复的随机数实例
2013/11/12 PHP
跟我学Laravel之路由
2014/10/15 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
YII框架关联查询操作示例
2019/04/29 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
分享一个asp.net pager分页控件
2012/01/04 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
python修改注册表终止360进程实例
2014/10/13 Python
python sort、sorted高级排序技巧
2014/11/21 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
先进个人自荐书
2015/03/06 职场文书
原告离婚代理词
2015/05/23 职场文书
接收函
2019/04/22 职场文书