这篇文章主要介绍了射流研究…模拟对话弹出浮动框效果代码，涉及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脚本语言程序设计有所帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。