以前项目中用到,在IE下测试可行,今天再修改可兼容FF。
var $;
var lastScrollY = 0;
var currentMoveObj = null; //当前拖动对象
var relLeft; //鼠标按下位置相对对象位置
var relTop;
/***************************
*定义公用方法:查找对象(ID)
***************************/
if (!$ && document.getElementById) {
$ = function() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string') {
element = document.getElementById(element);
}
if (arguments.length == 1) {
return element;
}
elements.push(element);
}
return elements;
};
} else if (!$ && document.all) {
$ = function() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string') {
element = document.all[element];
}
if (arguments.length == 1) {
return element;
}
elements.push(element);
}
return elements;
};
}
/**************************************
*定义公用方法:返回层的高度,宽度
**************************************/
function Alf() {
return (self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight);
}
function Aml() {
return (document.documentElement.offsetWidth || document.body.offsetWidth);
}
/**************************************
*定义公用方法:弹出消息对话框提示信息
**************************************/
function showMsgWin(msg,tit) {
setHideEleByTagName("select","none");
tit = (tit == null)?"信息提示":tit;
var dd_html = "";
tipsConv = document.createElement("DIV");
tipsConv.id = "tipsConv";
tipsConv.oncontextmenu = function(){return false;};
tipsConv.onSelectstart = function(){return false;};
tipsConv.style.cssText = "background-color:#CCCCCC;position:absolute;z-index:100;filter:alpha(opacity=60);";
tipsConv.style.width = document.body.clientWidth;
tipsConv.style.height = Alf();//document.body.scrollHeight;
//tipsConv.style.pixelTop = 0;
tipsConv.style.left = 0;
tipsConv.style.top = 0;
tipsConv.style.display = "block";
tipsConv.style.opacity="0.5";
document.body.appendChild(tipsConv);
dd_html += '<div style="text-align:center;border:solid 2px #C3D9FF;background:#ffffff">';
dd_html += ' <div id="tip" onmousedown="f_down(event);" onmousemove="f_move(event);" onmouseup="f_mouseup(event);" style="float:top;top:0px;width:100%;height:20px;background:#C3D9FF">';
dd_html += ' <p>' + tit + '</p>';
dd_html += ' </div>';
dd_html += ' <div style="background:#ffffff">';
dd_html += ' <p> </p>';
dd_html += ' <font color="red">';
dd_html += ' <p>' + msg + '</p>';
dd_html += ' </font>';
dd_html += ' <p> </p>';
dd_html += ' <p align="center"><a href="javascript:closeTips()">【关 闭】</a> </p>';
dd_html += ' </div>';
dd_html += '</div> ';
tips = document.createElement("DIV");
tips.id = "tipDiv";
tips.innerHTML = dd_html;
tips.style.cssText = "width:390px;position:absolute;z-index:100;";
//tips.style.pixelTop = lastScrollY + 120;
tips.style.top = lastScrollY + 120;
tips.style.left = (document.body.offsetWidth - 400) / 2;
tips.style.display = "block";
document.body.appendChild(tips);
//drag("tipDiv");
}
function closeTips(){
setHideEleByTagName("select","");
if($("tipsConv")){
document.body.removeChild($("tipsConv"));
}
if($("tipDiv")){
document.body.removeChild($("tipDiv"));
}
if($("tipIFrame")){
document.body.removeChild($("tipIFrame"));
}
}
/****************************
*定义公用方法:显示提示信息
*****************************/
function setHideEleByTagName(tagName,sty1){
var tmp = document.getElementsByTagName(tagName);
for(var i = 0; i < tmp.length; i++){
tmp[i].style.display = sty1;
}
}
/*********************
*窗口移动
*LUMIN2008-09-11
*修改:2010-02-24
**********************/
function f_down(ev){
ev = (ev)?ev:window.event;
currentMoveObj = $("tipDiv"); //当对象被按下时,记录该对象
currentMoveObj.style.position = "absolute";
$("tip").style.cursor = "move";
//document.ondragstart = "return false;"
//document.onselectstart = "return false;"
document.onselect = "document.selection.empty();"
relLeft = ev.clientX+document.body.scrollLeft-currentMoveObj.offsetLeft;
relTop = ev.clientY+document.body.scrollTop-currentMoveObj.offsetTop;
//if(currentMoveObj.setCapture)currentMoveObj.setCapture();
//else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
function f_mouseup(ev) {
//if(currentMoveObj.releaseCapture) currentMoveObj.releaseCapture();
//else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
$("tip").style.cursor = "";
currentMoveObj = null; //当鼠标释放时同时释放拖动对象
document.ondragstart = null;
document.onselectstart = null;
document.onselect = null;
}
function f_move(ev) {
if(currentMoveObj != null && currentMoveObj==$("tipDiv")){
ev = (ev)?ev:window.event;
$("tip").style.cursor = "move";
currentMoveObj.style.left=ev.clientX+document.body.scrollLeft-relLeft;
currentMoveObj.style.top=ev.clientY+document.body.scrollTop-relTop;
}
}
测试:
<script type="text/javascript" charset="gb2312" language="javascript" src="common.js"></script>
<input type="button" value="show" onclick="showMsgWin('hello this is my test demo!')"/>
分享到:
相关推荐
js弹出可移动的遮罩层,兼容多浏览器,ie firefox等主流浏览器!
自己原创的一款简单的jQuery弹出遮罩层小插件,弹出的层可移动、也可以关闭,时间关系没有进行美化,经过测试在IE6、7、8下都没有问题,其它浏览器没有测试。
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果,可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
图片列表预览插件,弹出层预览,功能小巧,复制即可使用,适用移动+PC端,如有问题及时交流
Div 对话框 可移动 可设遮罩层 可以同时打开多个对话框,JS源代码
弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的。 <style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color:#f5f5f5...
Silverlight弹出窗口Demo 1.解决多个弹出窗口时遮罩层重复...7.弹出窗口在拖动的时候可以移出其遮罩层的范围,最好可以控制遮罩层的大小且不允许弹出窗口随意移动,这样可以将弹出窗口的可移动范围控制在一个区域之内
支持弹出层的鼠标拖动移动,该部分用纯js编写执行效率更高 支持ajax加载页面到弹出层 支持一个页面,同时弹出多个层互不干扰 支持模式化弹出,带遮罩层 支持自定义弹出层样式 自带3个事件,开启、关闭、移除 ...
实现了div 在框架任意位置移动的,。。。。。。。。。。。。。。。。。。。
css+js脚本_当悬停时图片放大点击时更大并随鼠标移动图片
基于JavaScript的网页弹出层,鼠标按在弹出层的标题栏处,可以拖动该浮动层随意移动位置,不需要时也可以关闭,操作体验舒服,兼容性好,IE/火狐等众多浏览器下运行稳定、反应快速。代码表现方面,简洁务实,不玩虚...
本篇文章是对使用js实现遮罩以及弹出可移动登录窗口的实现方法进行了详细的分析介绍,需要的朋友参考下
今天给大家带来一个微信小程序的弹出是菜单效果,老规矩先上效果图。(录制的gif动画有点卡,实际真机或是模拟器上很顺畅) 先简单说下思路: 1、首先在屏幕的某个位置放几个悬浮按钮,放几个看你需要的功能 2、点击...
西城男孩(WestLife)组合人物介绍,WestLife人物档案,连续移动遮罩高亮显示人物头像然后停留弹出人物档案信息,适合人物或者团队介绍的动态ppt模板。
本文实例为大家分享JavaScript弹出拖拽窗口的具体实现代码,供大家参考,具体内容如下 需求说明: 1、点击页面按钮,弹出窗口; 2、要有半透明背景遮罩; 3、弹出窗口圆角,窗口半透明,但内容不透明;带阴影...
但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这不是我们想要的效果,因此需要阻止这种行为。 那么,如何阻止呢?请看以下分析: 方案分析 方案一 打开蒙层时,给...
遮罩层:初始不可见。用于设置弹出悬浮窗口时的半透明背景, 按钮:用于点击弹出悬浮窗口。 下面进行详细解释 1、要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute); /*...
3,遮罩层,弹出窗口的移动,改变大小,最小化和最大化 4,列表页,发布页和多标签切换页的布局 5,选项卡效果,气泡滑动显示,盒子box改变大小和锁屏等功能。 6,部分图片来自其他框架,还有很多不足,希望大家...