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

接上文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。
 支持的浏览器:

2.  cursor: move

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

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>

在各浏览器中效果如下:

注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

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

(0)

相关推荐

  • javascript支持firefox,ie7页面布局拖拽效果代码

    javascript 拖拽JavaScript Google IG Drag Demo,非常棒的拖动,准备用于F2Blog新Theme的后台模块设置,之间的拖 动 拖拽效果的页面效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag.htm加强版效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag2.htm拖拽原理: 关于拖拽的基础,可以参考这篇文章,讲得非常不错. 其实原理很简单,就是

  • JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭) 特点: ① 窗口可以拖动: ② 窗口可以通过八个方向改变大小: ③ 窗口可以最小化.最大化.还原.关闭: ④ 限制窗口最小宽度/高度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • 关于js拖拽上传 [一个拖拽上传修改头像的流程]

    如今现代的浏览器已经有很多支持拖拽文件读取操作,其优点不再复述.前端时间利用拖拽改进了一下网站的头像上传流程,对其中的要点和实践体会做一点总结. 先看一下总体视图:1. 文件拖拽接受区域要有明显的标示,并且要尽可能的大(由于版面的原因,这个界面的拖放盒子并不大).可以用虚线框盒子等样式吸引用户拖拽文件.最好有明显的文字提示和图标配合. 2. 在交互体验上当文件拖入浏览器窗口时,可以用拖放区变换背景颜色等向用户发起放置操作邀请. 实现代码: 复制代码 代码如下: doc.bind({ 'drage

  • 百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome

    我们之前发布过这样的代码,其实问题不大,但这里的版本主要是增加一些功能,回调执行服务器端的方法,对于asp.net开发或ajax开发都是非常有价值的改进.先看下效果图: 原有百度的Popup.js在有 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

  • js实现小窗口拖拽效果

    本文实例为大家分享了js实现窗口拖拽的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { height: 300px; width: 300px; background-color: green; po

  • javascript实现漂亮的拖动层,窗口拖拽特效

    javascript实现漂亮的拖动层,窗口拖拽特效 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

  • JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ

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

    本文实例为大家分享JavaScript弹出拖拽窗口的具体实现代码,供大家参考,具体内容如下 需求说明:  1.点击页面按钮,弹出窗口:  2.要有半透明背景遮罩:  3.弹出窗口圆角,窗口半透明,但内容不透明:带阴影:  4.窗口可拖动:  5.拖动停止之后,滚动页面时窗口位置不动:  6.可以使用jQuery:  7.有关闭按钮:  进一步功能具体描述:  点按钮,会有一个可以拖拽的浮层出来.  有一个背景遮罩,支持标题栏的拖拽,在标题栏以外,在标题栏区域之外的区域拖拽是没有效果的,拖拽功能限

  • Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    在阅读本文之前,请先看一看第一篇文章Javascript拖拽系列文章1之offsetParent属性,因为循序渐进是一个很好的习惯,值得提倡.好了,看看我们今天的内容吧. 首先让我们先看一看element.offsetLeft属性. 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ 定义:返回一个像素数值,它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量.

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

    接上文JavaScript简单实现弹出拖拽窗口(一)进行学习.  下面开始具体分析代码部分:  首先我们先确认下结构:  悬浮窗口:初始不可见.包括标题栏和内容栏,标题栏内有标题和关闭按钮.  遮罩层:初始不可见.用于设置弹出悬浮窗口时的半透明背景,  按钮:用于点击弹出悬浮窗口. 下面进行详细解释  1.要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute):    /*登录浮层组件*/ .popup{ display:none; /*初始隐藏*/ widt

  • javascript实现右侧弹出“分享到”窗口效果

    本文实例讲解了javascript实现右侧弹出"分享到"窗口的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta charset="gb2312"> <title></title> <style type="text/css"> body { padding: 0; margin: 0; } #div1 { width:

  • 用javascript父窗口控制只弹出一个子窗口

    近来网上经常流传一些关于如何在父窗口控制只弹出一个子窗口 问题,我查看了一些,大部分都是只能解决部分或者很麻烦,还不算完美.比如有人是实现的这样,使用的是Cookie,以下是例子. 主页上做了一个弹出窗口,如何使其只弹出一次,返回主页时不再弹出了. --------------------------------------------------------------- <script> window.open("http://www.yeboss.com.cn",&q

  • 详解JavaScript面向对象实战之封装拖拽对象

    目录 概述 1.如何让一个DOM元素动起来 2.如何获取当前浏览器支持的transform兼容写法 3.如何获取元素的初始位置 5.我们需要用到哪些事件? 6.拖拽的原理 7. 我又来推荐思维导图辅助写代码了 8.代码实现 part1.准备工作 part2.功能函数 part3.声明三个事件的回调函数 9.封装拖拽对象 概述 为了能够帮助大家了解更多的方式与进行对比,我会使用三种不同的方式来实现拖拽. 不封装对象直接实现: 利用原生JavaScript封装拖拽对象: 通过扩展jQuery来实现拖

  • 基于JavaScript实现右键菜单和拖拽功能

    下面先给大家介绍下js实现的右键菜单功能,具体详情如下所示: 这一章解决的问题 1.实现右键菜单功能代码. 2.阻止默认事件的实际应用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> #menu {

  • Android使用Activity实现从底部弹出菜单或窗口的方法

    本文实例讲述了Android使用Activity实现从底部弹出菜单或窗口的方法.分享给大家供大家参考,具体如下: 这里使用activity实现弹出滑动窗口或菜单,主要是使用了一些设置activity的样式来实现弹出窗口和滑动效果,实现如下: 第一步:设计要弹出窗口的xml布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://sche

  • JavaScript常用的弹出广告及背投广告实现方法

    本文实例讲述了JavaScript常用的弹出广告及背投广告实现方法.分享给大家供大家参考.具体分析如下: 弹出广告和背景广告在大网站用的比较多,也是站长的必备代码,本代码段中包括弹出窗口广告以及背投广告两种形式,根据自己的需要,你可以随意选择. 注:这类广告不建议大家用,大多浏览器都会把此类AD拦截,只为大家学习之用. 复制代码 代码如下: <html> <head> <title>JavaScript常用的弹出广告及背投广告代码</title> </

  • jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现在又有了jquery让我们用,更方便了,本代码演示了在CSS代码.JavaScript代码和HTML三者结合的情况下,如何实现一个可关闭的弹出窗口,鼠标点击关闭按钮后将其关闭,然后会显示打开按钮,单击这个按钮即弹出这个层窗口. 运行效果截图如下: 在线演示地址如下: http://demo.jb51

  • JavaScript动态修改弹出窗口大小的方法

    本文实例讲述了JavaScript动态修改弹出窗口大小的方法.分享给大家供大家参考.具体如下: 下面的JS代码演示了如何通过window.open弹出一个新的窗口,然后动态修改窗口大小 <!DOCTYPE html> <html> <head> <script> var w; function openwindow() { w=window.open('','', 'width=100,height=100'); w.focus(); } function

随机推荐