以前项目中用到,在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移动端点击弹出遮罩层"这一功能就是一个典型的交互设计,它允许用户通过点击按钮来显示一个覆盖整个屏幕的半透明层,通常用于加载提示、模态对话框或者阻止背景操作等场景。下面将详细介绍如何使用JavaScript来...
当网页内容过多需要滚动时,lhgdialog的弹出层可以配置为随滚动条一起移动。这样,无论用户滚动到页面的哪个部分,弹出层始终保持在视野范围内,保持其可见性和相关性。 6. 使用lhgdialog库: 要使用lhgdialog,...
总的来说,"jQuery点击弹出遮罩层图片放大查看代码"是提高网站用户体验的一种实用技术,它通过简单的JavaScript和CSS实现,让图片查看更加便捷。在实际应用中,开发者可以根据需求进行定制,比如调整遮罩层的颜色、...
综上所述,这个"js+css点击弹出遮罩层图片放大展示demo"通过结合JavaScript和CSS的力量,实现了优雅的图片放大查看功能,为用户带来了更直观、更具沉浸感的浏览体验。在实际项目中,可以根据需求进行调整和优化,以...
本篇文章将详细探讨在jQuery中实现弹出遮罩层的技术要点,通过几个实例来帮助初学者理解并掌握这一技能。 首先,我们需要了解遮罩层(Modal)的概念。遮罩层是一种常见的用户界面元素,它在网页上创建一个半透明或...
在网页设计和开发中,"弹出遮罩层"是一个常见的功能,用于创建对话框、模态窗口或者加载指示器,以提供用户交互时的反馈或阻断背景内容的交互。这种技术通常用于显示重要的通知、确认操作或进行表单提交等场景。下面...
当需要弹出遮罩层时,将其display属性设置为block;当不需要时,将其设回none。此外,为了实现可移动性,我们需要监听鼠标的mousedown、mousemove和mouseup事件,通过计算鼠标移动的距离来更新遮罩层的位置。 ```...
"jQuery从下到上弹出遮罩层.rar"这个压缩包提供了一个实用的示例,它演示了如何利用CSS、jQuery和JavaScript技术来实现一个底部弹出的遮罩层。下面,我们将详细探讨这些技术以及它们在实现这个功能时的角色。 首先...
这篇内容主要介绍的是一个基于jQuery的简单弹出遮罩层小插件,名为"qsBox",由作者原创。这个小插件的核心功能是创建一个可移动、可关闭的弹出层,它在设计时特别考虑了对老版本Internet Explorer(IE6、IE7和IE8)...
当用户按下鼠标并在弹出层上移动时,计算偏移量并相应地更新弹出层的位置。 4. **显示和隐藏**:编写函数以控制弹出层和遮罩层的显示和隐藏。这可能涉及改变元素的CSS属性,如`display`或`visibility`。 5. **交互...
"点击图片弹出遮罩层加载大图"是一个常见的功能,它为用户提供了一个优雅的方式来预览图片,尤其在移动端和PC端的混合场景中。这个功能允许用户在点击小图后,通过弹出的遮罩层快速查看大图,而不会离开当前页面或...
在标题提及的案例中,"jQuery弹出层 可移动层 提示框 浮动层",意味着我们需要创建一个不仅可以显示信息,还可以通过用户手势移动的浮动窗口。为了实现这一功能,我们需要结合jQuery的选择器、事件处理和动画方法。...
在网页设计中,遮罩层通常被用来突出显示特定内容,例如弹出对话框、图片预览或加载动态信息时,它会在页面上创建一个半透明的覆盖层,将用户的注意力集中在弹出的内容上,同时保持背景页面可见但模糊。GreyBox 在这...
1. **遮罩效果**:遮罩层是在弹出窗口后面添加一个半透明的背景层,以突出显示弹出窗口并防止用户与页面其他部分互动。实现这一效果通常涉及到CSS的透明度和定位属性,以及JavaScript来动态调整遮罩层的大小和显示。...
在Vue应用中,有时我们需要实现一个弹出遮罩层的功能,通常用于显示对话框、加载指示器或者阻止用户在特定操作期间与页面交互。本篇文章将深入探讨如何在Vue中创建一个全屏的、响应式的遮罩层,并解决在实现过程中...
Div 对话框 可移动 可设遮罩层 可以同时打开多个对话框,JS源代码
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果,可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
本资源"jquery实现的点击弹出遮罩背景并且可以拖动关闭的弹出层特效代码.zip"提供了一个利用jQuery创建交互式弹出层的实例,该弹出层具有遮罩背景效果并支持通过拖动来关闭。 首先,我们需要理解jQuery中的基本概念...
"最中间弹出对话框,遮罩层 可以拖动"这个标题所描述的功能是一种常见且实用的用户交互设计,通常用于提醒、确认或者提供更多信息。在这个场景中,我们使用jQuery库来实现这一功能,它是一个广泛使用的JavaScript库,...
本资源“jQuery点击遮罩弹出层固定居中代码.zip”提供了一种实现自适应遮罩弹窗的解决方案,特别适用于移动设备。下面我们将深入探讨相关知识点。 首先,我们来理解“遮罩弹出层”。在网页中,遮罩层通常是一个半...