/**
* 可以移动的提示窗口
*/
function windowMsg(title,htmlcode,width,height)
{
var shield = document.createElement("DIV");
shield.id = "shield";
shield.style.position = "absolute";
shield.style.left = "0px";
shield.style.top = "0px";
shield.style.width = "100%";
shield.style.height = "100%";
//shield.style.height = document.body.scrollHeight+"px";
shield.style.background = "#DFDFDF";
shield.style.textAlign = "center";
shield.style.zIndex = "10000";
shield.style.filter = "alpha(opacity=0)";
var alertFram = document.createElement("DIV");
alertFram.id="alertFram";
alertFram.style.position = "absolute";
//负边界居中法,相对于shield层的底部时
alertFram.style.right = "50%";
alertFram.style.bottom = "50%";
alertFram.style.marginRight = "-125px";
alertFram.style.marginBottom = "75px";
alertFram.style.width = (width+10)+"px";
alertFram.style.height = "100px";
alertFram.style.background = "#fff";
alertFram.style.textAlign = "center";
alertFram.style.lineHeight = "150px";
alertFram.style.zIndex = "10002";
var strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%;text-align:left;height:25px;line-height:25px;background:#FFFFFF\">\n";
strHtml += "<li onmousedown=\"oMove(parentNode.parentNode);\" style=\"cursor:move;background:#FFFFFF;\">";
strHtml+="<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" background=\""+jQuery("#appPath").val()+"images/np032.jpg\">";
strHtml+="<tr><td width=\"85%\" style=\"padding-left:4px; color:#FFFFFF; font-size:12px;font-weight:bold; line-height:24px;\"> "+title+"</td><td width=\"15%\" align=\"right\"><img src=\""+jQuery("#appPath").val()+"images/np034.jpg\" style=\"cursor: pointer\" title=\"关闭\" width=\"25\" height=\"19\" border=\"0\" onclick=\"remove()\"/></td></tr>";
strHtml+="</table></li>\n";
strHtml += "<li style=\"font-size:12px;height:"+(height+5)+"px;background:#FFFFFF;text-align:center;border-bottom:1px #008FEF solid;border-left:1px #008FEF solid;border-right:1px #008FEF solid;margin-top:-3px;padding-top:3px;\">"+htmlcode+"</li>\n";
strHtml += "</ul>\n";
alertFram.innerHTML = strHtml;
document.body.appendChild(alertFram);
document.body.appendChild(shield);
var c = 0;
this.doAlpha = function(){
if (c++ > 50){clearInterval(ad);return 0;}
shield.style.filter = "alpha(opacity="+c+");";
}
this.remove=function(){
alertFram.innerHTML="";
shield.style.filter = "";
shield.id = "";
shield.style.position = "";
shield.style.left = "";
shield.style.top = "";
shield.style.width = "";
shield.style.height ="";
shield.style.background = "";
shield.style.textAlign = "";
shield.style.zIndex = "";
shield.style.filter = "";
alertFram.id="";
alertFram.style.position = "";
alertFram.style.left = "";
alertFram.style.top = "";
alertFram.style.marginLeft = "";
alertFram.style.marginTop = "";
alertFram.style.width = "";
alertFram.style.height = "";
alertFram.style.background = "";
alertFram.style.textAlign = "";
alertFram.style.lineHeight = "";
alertFram.style.zIndex = "";
}
var ad = setInterval("doAlpha()",10);
alertFram.focus();
document.body.onselectstart = function(){return false;};
}
function oMove(obj){
var otop,oleft;
otop = event.y - obj.offsetTop;
oleft = event.x - obj.offsetLeft;
obj.setCapture();
obj.onmousemove = function()
{
obj.style.left = event.x - oleft;
obj.style.top = event.y - otop;
}
obj.onmouseup = function()
{
obj.onmousemove = null;
obj.style.filter = null;
obj.releaseCapture();
}
}
分享到:
相关推荐
标题“可移动div”指的是在网页开发...总的来说,创建可移动div是网页动态交互设计的一个基础技能,涉及到JavaScript事件处理、DOM操作和性能优化等多个方面。熟练掌握这一技巧,对于提升网页应用的用户体验至关重要。
在这个“Div可拖动窗口,弹出提示消息窗口”的项目中,我们主要关注的是如何利用JavaScript来实现两个关键功能:一是使Div元素具备拖动和大小调整的能力,二是创建一个弹出的提示消息窗口,其效果类似于QQ的屏幕右下...
标题“漂亮的DIV可拖动弹出窗口(精品)”所指的就是利用这些技术来实现一个既美观又具有交互性的弹出窗口。下面将详细介绍这个知识点。 首先,HTML是构建网页的基础,用来定义页面结构。在这个场景中,我们需要...
这个“JS弹出Div窗口(可拖拽)”的示例就是一个解决此类需求的实用方案。 首先,让我们深入理解Div元素。Div是HTML中的一个块级元素,它可以容纳其他HTML元素并进行样式化。通过CSS,我们可以设置Div的宽高、边距、...
标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能,允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素,如窗口、面板或者任何需要动态...
在网页开发中,创建一个可拖动的div弹窗是一项常见的需求,特别是在构建用户界面时。这个场景描述的“可拖动div弹窗esc关闭 锁屏”涉及到多个技术点,我们将逐一详细解释。 首先,"可拖动div"是指在HTML页面中,...
在JavaScript编程领域中,创建可拖动窗口控件和弹出提示框是常见的需求,尤其在Web应用中,用户交互的界面设计至关重要。本资源提供了一种解决方案,它是一个基于JavaScript和CSS的可定制对话框控件,允许开发者创建...
jQuery jBox是一个轻量级、可高度定制的插件,用于创建此类浮动窗口。它以其灵活性和与QQ空间弹窗相似的外观而受到开发者的欢迎。下面我们将深入探讨jQuery jBox的关键特性、用法以及如何在项目中应用。 ### jQuery...
在网页设计中,"div移动块"是一种常见的技术,它允许开发者创建可移动的元素,如窗口、广告栏或其他互动式界面组件。这种技术主要基于HTML的`<div>`元素结合JavaScript来实现,使得用户可以通过点击或拖动来改变元素...
本教程将深入探讨如何使用JavaScript库JQuery来创建一个可移动的模态窗口。 首先,我们需要了解JQuery的基本用法。JQuery是一个高效、简洁的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互。在实现可...
在网页设计和开发中,"通用弹出可移动的DIV块"是一种常见的交互元素,它允许用户通过JavaScript或jQuery等库动态创建、显示和移动一个包含内容的div元素。这种功能广泛应用于模态对话框、提示窗口或者自定义菜单等...
首先,为了让浮动窗口可移动,我们需要监听鼠标事件,当鼠标按下时记录初始位置,然后在鼠标移动时更新`div`的位置: ```javascript $(document).ready(function() { var $floatWin = $('#floatWindow'); var ...
在HTML中,div(division)是一个用于分组其他HTML元素的容器,通常用于布局和样式控制。通过CSS,我们可以为div设置宽高、位置、背景色等属性,使其成为创建弹出窗口的基础。 在"可移动.htm"和"移动层.htm"中,...
在这个例子中,我们创建了一个带有类名为`float-window`的浮动窗口,它有一个可拖动的处理区(类名为`handler`)。当用户按下鼠标并在处理区上移动时,`moveWindow`函数会被调用,根据鼠标的当前位置更新窗口的位置...
这个项目通过结合JavaScript(简称js)和XSLT(可扩展样式表语言转换)技术,实现了一个用div元素模拟的可拖动、可调整大小的窗口功能。下面我们将深入探讨这一技术的核心知识点。 首先,我们需要理解`div`元素在...
通过CSS样式和JavaScript交互,我们可以创建可拖动、可缩放、可关闭的`<div>`窗口,从而让网页界面更加生动和互动。 首先,我们需要了解HTML `<div>`元素。`<div>` 是一个块级元素,用于组合其他HTML元素,可以通过...
在网页设计中,"用层模拟可移动的小窗口"是一种常见的交互效果,它通常通过JavaScript(JS)实现,用于创建类似弹出对话框或者浮动小窗口的动态效果。这种技术可以增强用户体验,使得用户能够在不离开当前页面的情况...
虽然具体内容无法直接提供,但可以基于这个主题分享一些通用的方法来创建一个可移动的div层: 1. **HTML 结构**:首先,我们需要一个包含内容的div元素,例如: ```html <div id="myPopup" class="popup"> 弹出...
在网页设计中,"div"元素是一个非常基础且重要的部分,它用于定义文档中的分区或区块。本案例集主要探讨如何利用"div"配合CSS(层叠样式表)和JavaScript来实现各种弹出窗口效果。这些效果对于网页交互性和用户体验...