这篇文章主要介绍了射流研究…模拟对话弹出浮动框效果代码，涉及Java脚本语言可拖动窗口的创建及布局相关技巧，具有一定参考借鉴价值，需要的朋友可以参考下
本文实例讲述了射流研究…模拟对话弹出浮动框效果代码。分享给大家供大家参考。具体如下：
这里演示射流研究…模拟对话弹出浮动框，蓝色经典风格，可以创建一个新层，可设置弹出层的标题和内容，用它可实现一个登录框，或用在后台管理中。
运行效果截图如下：
在线演示地址如下：
http://演示。jb51。net/js/2015/js-Mn-dialog-float-DLG-style-demo/
具体代码如下：
！DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。 DTD
html xmlns= http://。w3。 org/1999/XHTML
头
meta http-equiv= Content-Type Content= text/html；charset=gb2312 /
标题对话框浮动窗口/标题
style type=text/css 。对话框容器{ height:400 px；宽度：400像素边框：1px纯色# 14495f位置：绝对；字体大小：13px}。对话框标题{ height:26px；宽度：自动；背景-图片：URL(images/103444839 _ p . gif)；}。dialogtitleinfo { float:left；高度：20px边距-顶部：2px左边距：10px行高：20px垂直对齐：居中；颜色：# FFFFFF字体粗细：粗体；}。dialogtitleico { float:right；高度：20px宽度：21px边距-顶部：2px右边距：5px文本对齐：居中；行高：20px垂直对齐：居中；背景-图片：URL(images/103419495 _ p . gif)；背景-位置：-21px 0px}。对话框正文{ padding:10px；宽度：自动；背景色：# FFFFFF}。对话框底部{
底部：1px右：1px光标：西北-调整大小；
位置：绝对；
背景-图片：URL(images/103419495 _ p . gif)；
背景-位置：-42px-10px；
宽度：10px
高度：10px
字体大小：0;}
/风格
/头
身体
输入值=创建type= button onclick= creat()/
div id=aa/div
脚本
var z=1，i=1，left=10
var isIE=(document.all)？真：假；
var $=函数(id) {
返回文档。getelementbyid(id)；
};
var扩展=函数（目标，源){
对于(源中的变量属性){
目的地[属性]=源[属性];
}
}
var Bind=function(object，fun，args) {
返回函数(){
返回fun.apply(object，args | |[])；
}
}
var bindas事件监听器=function(object，fun) {
var args=数组。原型。切片。打电话(参数)。切片(2);
返回函数（事件){
返回fun.apply(对象，[事件||窗口。事件])。concat(args))；
}
}
var current style=函数(元素){
返回元素。当前样式| |文档。默认视图。getcomputedstyle(element，null)；
}
函数create(elm，parent，fn){ var element=document。createelement(榆树)；fnfn(元素);parentparent.appendChild(元素);返回元素};
函数addListener(element，e，fn){ element.addEventListener？element.addEventListener(e，fn，false):element。附加事件( on e，fn)}；
函数removeListener(元素，e，fn){元素。删除事件侦听器吗？element.removeEventListener(e，fn，false):element。detachevent( on e，fn)}；
var Class=function(properties){
var _ class=function(){ return(arguments[0]！==null这个。初始化的类型(this。initialize)== function )？this.initialize.apply(this，arguments):this；};
_ class.prototype=properties
返回_类
};
变量对话框=新类({
选项：{
宽度：400,
身高：400,
左：100,
Top : 100，
头衔身高：26,
最小宽度：200,
明海特：200,
坎塞利科：没错，
ResizeIco : false，
信息： 新闻标题，
内容： 无内容，
Zindex : 2
},
初始化：函数（选项){
这个. dragobj=null
这个. resize=null
这个. cancel=null
这个. body=null
这个. x=0；
这个. y=0；
这个. fM=BindAsEventListener(这个，这个。动);
这个. fS=Bind(这个，这个。停);
这个. isdrag=null
这个. Css=null
这个宽度=这个。选项。宽度；
这个身高=这个。选项。身高；
这个.左=这个。选项。左；
这个. top=这个。选项。顶；
这个. CancelIco=这个。选项。CancelIco
这个. info=这个。选项。信息；
这个.内容=这个。选项。内容；
这个最小宽度=这个。选项。最小宽度；
这个最小身高=这个。选项。最小高度；
这个标题高度=这个。选项。标题高度；
这个zindex=这个。选项。zindex
扩展（这个，选项);
对话Zindex=这个100 . Zindex
//构造对话
var obj=[dialogcontainter ， dialogtitle ， dialogtitleinfo ， dialogtitleico ， dialogbody ， dialog bottom ]；
for(var I=0；iobj.length我)
{ obj[i]=create(div ，null，function(elm){ elm。class name=obj[I]；});}
对象[2]。innerHTML=this .信息；
对象[4]。innerHTML=this .内容；
对象[1]。appendChild(obj[2])；
对象[1]。appendChild(obj[3])；
对象[0].appendChild(obj[1])；
对象[0].appendChild(obj[4])；
对象[0].appendChild(obj[5])；
文档。身体。appendchild(obj[0])；
这个. drag obj=obj[0]；
这个. resize=obj[5]；
这个. cancel=obj[3]；
这个. body=obj[4]；
///o，x1，x2
////设置对话的长宽，左侧，顶部
用（这个. dragobj.style){
身高=这个。高度px’；顶部=这个。顶级px’；宽度=这个。宽度px’；左=这个。左px’；zIndex=这个100 . Zindex
}
这个. body.style.height=this .身高-这个标题高度-解析int(当前样式(this ._body).左填充)* 2“px”；
///////////////////////////////////////////////////////////////////////////////添加事件
addListener(this ._dragobj， mousedown ，BindAsEventListener(this，this .Start，true))；
addListener(this ._cancel，“鼠标悬停”，Bind(这个，这个106 . change BG，[这个. cancel _ 0px 0px ，-21px 0px ])；
addListener(this ._cancel， mouseout ，Bind(这个，这个106 . change BG，[这个. cancel _ 0px 0px ，-21px 0px ])；
addListener(this ._cancel， mousedown ，BindAsEventListener(this，this .消失));
addListener(this ._body， mousedown ，BindAsEventListener(这个，这个.取消泡泡))；
addListener(this ._resize， mousedown ，BindAsEventListener(this，this .Start，false))；
},
消失：函数(e){
这个。可取消气泡(e)和：
document.body.removeChild(this ._ drag obj)；
},
取消气泡：函数(e){
这个dragobj.style.zIndex=Dialog .Zindex
文档。全部？(e .取消气泡=真):(e .停止传播())
},
Changebg:function(o，x1，x2){
哦。风格。背景位置=(o . style。背景位置==x1)？x2:x1；
},
Start:function(e，isdrag){
如果(!是拖动){这个。可取消气泡(e)和：}
这个. Css _ Css=is drag？{x:left ，y:top}:{x:width ，y:height}
这个dragobj.style.zIndex=Dialog .Zindex
这个. isdrag=isdrag
这个. x=isdrag？(客户端X - this ._dragobj.offsetLeft||0):(这个.拖动对象。向左偏移| | 0)；
这个. y=isdrag？(客户——这个. dragobj.offsetTop | | 0):(这个.拖动对象。offsettop | | 0)；
如果(isIE)
{
addListener(this ._dragobj， losecapture ，这个. fS)；
这个.拖动对象。set capture()；
}
其他
{
e。防止默认()；
addListener(窗口，‘侠影’，这个._ fS)；
}
addListener(文档，‘鼠标移动’，这个._fM)
addListener(文档，‘鼠标左键’，这个._fS)
},
移动：函数(e){
window.getSelection？window.getSelection().removeAllRanges():document。选择。empty()；
var i_x=e.clientX - this ._x，i_y=e.clientY - this ._ y；
这个. dragobj.style[this ._Css.x]=(这个. isdrag？Math.max(i_x，0):Math.max(i_x，this .最小宽度)) px ；
这个. dragobj.style[this ._Css.y]=(这个. isdrag？Math.max(i_y，0):Math.max(i_y，this .最小高度))像素
如果(!这个. isdrag)
这个.身体。风格。身高=数学。最大值(I _ y-this .标题高度，这个。米恩海特-这个title height)-2 * parse int(当前样式(this ._body).左填充) px ；
},
停止：函数(){
移除监听器(文档，‘鼠标移动’，这个._ fM)；
移除监听器(文档，‘鼠标左键’，这个._ fS)；
如果(isIE)
{
removeListener(这._dragobj， losecapture ，这个. fS)；
这个.拖动对象。释放capture()；
}
其他
{
移除监听器(窗口，‘侠影’，这个._ fS)；
};
}
})
新建对话框({宽度：300,高度：300,左侧：300,顶部：300 });
新建对话框({Info:人族，内容：人族很强吗？});
函数creat(){
新建对话框({Info:title=标题我，左：左300,上：左300,内容：内容我，Zindex:(对话. zindex)})；
我；左=10;
}
/脚本
/body
/html
希望本文所述对大家的Java脚本语言程序设计有所帮助。
