部分内容是参考的别人的内容 先写上html的部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript自定义弹出对话框</title>
<link rel="styleSheet" href="inc/style.css" type="text/css" />
<script type="text/javascript" src="inc/dialog_box.js"></script>
</head>
<body>
<div id="content">
<p>
<a href="javascript:showDialog('Warning','出现警告，清自习查看.','warning');">点我</a>
</p>
</div>
</body>
</html>
下面是JavaScript的代码，感觉还不错
var TIMER = 5;
var SPEED = 10;
var WRAPPER = 'content';
//以下的一段代码是为了设定要显示的位置
function pageWidth() {
return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}
function pageHeight() {
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}
function topPosition() {
return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}
function leftPosition() {
return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}
//通过传递的参数创建div层的信息
function showDialog(title,message,type,autohide) {
if(!type) {
type = 'error';
}
var dialog;
var dialogheader;
var dialogclose;
var dialogtitle;
var dialogcontent;
var dialogmask;
if(!document.getElementById('dialog')) {
dialog = document.createElement('div');
dialog.id = 'dialog';
dialogheader = document.createElement('div');
dialogheader.id = 'dialog-header';
dialogtitle = document.createElement('div');
dialogtitle.id = 'dialog-title';
dialogclose = document.createElement('div');
dialogclose.id = 'dialog-close'
dialogcontent = document.createElement('div');
dialogcontent.id = 'dialog-content';
dialogmask = document.createElement('div');
dialogmask.id = 'dialog-mask';
document.body.appendChild(dialogmask);
document.body.appendChild(dialog);
dialog.appendChild(dialogheader);
dialogheader.appendChild(dialogtitle);
dialogheader.appendChild(dialogclose);
dialog.appendChild(dialogcontent);
document.getElementById("dialog-header").onmousedown = function() {
move(event);
};
document.getElementById("dialog-header").onmouseup = function() {
stopMove(event);
};
dialogclose.setAttribute('onclick','hideDialog()');
dialogclose.onclick = hideDialog;
} else {
dialog = document.getElementById('dialog');
dialogheader = document.getElementById('dialog-header');
dialogtitle = document.getElementById('dialog-title');
dialogclose = document.getElementById('dialog-close');
dialogcontent = document.getElementById('dialog-content');
dialogmask = document.getElementById('dialog-mask');
dialogmask.style.visibility = "visible";
dialog.style.visibility = "visible";
}
dialog.style.opacity = .00;
dialog.style.filter = 'alpha(opacity=0)';
dialog.alpha = 0;
var width = pageWidth();
var height = pageHeight();
var left = leftPosition();
var top = topPosition();
var dialogwidth = dialog.offsetWidth;
var dialogheight = dialog.offsetHeight;
var topposition = top + (height / 3) - (dialogheight / 2);
var leftposition = left + (width / 2) - (dialogwidth / 2);
dialog.style.top = topposition + "px";
dialog.style.left = leftposition + "px";
dialogheader.className = type + "header";
dialogtitle.innerHTML = title;
dialogcontent.className = type;
dialogcontent.innerHTML = message;
var content = document.getElementById(WRAPPER);
dialogmask.style.height = content.offsetHeight + 'px';
dialog.timer = setInterval("fadeDialog(1)", TIMER);
if(autohide) {
dialogclose.style.visibility = "hidden";
window.setTimeout("hideDialog()", (autohide * 1000));
} else {
dialogclose.style.visibility = "visible";
}
}
function hideDialog() {
var dialog = document.getElementById('dialog');
clearInterval(dialog.timer);
dialog.timer = setInterval("fadeDialog(0)", TIMER);
}
function fadeDialog(flag) {
if(flag == null) {
flag = 1;
}
var dialog = document.getElementById('dialog');
var value;
if(flag == 1) {
value = dialog.alpha + SPEED;
} else {
value = dialog.alpha - SPEED;
}
dialog.alpha = value;
dialog.style.opacity = (value / 100);
dialog.style.filter = 'alpha(opacity=' + value + ')';
if(value >= 99) {
clearInterval(dialog.timer);
dialog.timer = null;
} else if(value <= 1) {
dialog.style.visibility = "hidden";
document.getElementById('dialog-mask').style.visibility = "hidden";
clearInterval(dialog.timer);
}
}
//实现浏览器之间的event兼容
function getSrc(event) {
return (event.srcElement?event.srcElement:event.target);
}
var moving = false;
var px,py;
//实现层的移动
function move(mevent) {
//在IE中和Firefox中兼容 按下鼠标左键的事件不同
if(document.all&&(mevent.button ==1 || mevent.button == 0)) {
moving = true;
} else if(event.button == 0) {
moving = true;
}
//点击了左键 可以移动
if(moving && (mevent.button == 1 || mevent.button == 0)) {
var head = document.getElementById("dialog");
px = parseInt(mevent.clientX-head.offsetLeft);
py = parseInt(mevent.clientY-head.offsetTop);
document.documentElement.onmousemove = function(mevent) {
var eEvent;
if(document.all) {
eEvent=event;
} else {
eEvent = mevent;
}
var x=eEvent.clientX-px;
var y=eEvent.clientY-py;
head.style.left=(x)+"px";
head.style.top=(y)+"px";
}
}
}
//释放层的移动
function stopMove(event) {
moving = false;
document.documentElement.onmousemove=null;
下面的css的内容
#content {
padding: 20px;
}
#dialog {
position: absolute;
left: expression(( body . clientWidth-350)/ 2 );
top: expression(( body . clientHeight-200)/ 2 );
width: 425px;
padding: 10px;
z-index: 200;
background: #fff;
}
#dialog-header {
display: block;
position: relative;
width: 411px;
padding: 3px 6px 7px;
height: 14px;
font-size: 14px;
font-weight: bold;
cursor: move;
}
#dialog-title {
float: left;
}
#dialog-close {
float: right;
cursor: pointer;
margin: 3px 3px 0 0;
height: 11px;
width: 11px;
background: url(dialog_close.gif) no-repeat
}
#dialog-content {
display: block;
height: 160px;
padding: 6px;
color: #666666;
font-size: 13px
}
#dialog-mask {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
width: 100%;
background: #FFF;
opacity: .75;
filter: alpha(opacity = 75,style = 0);
z-index: 100;
}
.warning {
background: #fff url(warning_bg.jpg) bottom right no-repeat;
border: 1px solid #c5a524;
border-top: none
}
.warningheader {
background: url(warning_header.gif) repeat-x;
color: #957c17;
border: 1px solid #c5a524;
border-bottom: none
}
具体的代码见附件里面
分享到：
相关推荐
在这个项目中，我们讨论的是如何使用这两种语言来创建一个可拖动的弹出层，并实现兼容IE7及以上版本，包括Firefox和Chrome在内的多种浏览器的锁屏效果。这个功能在网页应用中很常见，比如在显示模态对话框或提示信息...
"js弹出层可拖动兼容各大浏览器"这个主题涵盖了如何利用JavaScript实现一个弹出窗口，并确保它在各种浏览器（如Chrome、Firefox、Safari、Edge和IE等）上具有良好的兼容性。下面我们将深入探讨这一技术。 首先，...
总之，掌握纯JavaScript实现弹出框和弹出层的技术，以及如何在各种浏览器中实现拖拽和兼容性，对于提升网页交互体验和开发能力至关重要。通过不断学习和实践，开发者可以创造出更加高效、个性化的用户界面。
考虑到跨浏览器兼容性，此插件尽可能地支持主流浏览器，如Chrome、Firefox、Safari、Edge和IE9及以上。同时，通过优化的CSS3动画，保持了良好的性能，即使在移动设备上也能流畅运行。 总结 "20种弹出层"插件以其...
本项目聚焦于实现一个兼容IE（Internet Explorer）和FF（Firefox）的可拖动弹出层，这意味着开发者已经考虑到了跨浏览器兼容性问题，这对于处理不同用户使用的不同浏览器时非常重要。 首先，我们需要了解弹出层的...
综上所述，这个示例代码提供了一种实现JavaScript弹出层并实现拖动和跨浏览器兼容性的方法。开发者可以通过这个基础框架，根据实际项目需求进行扩展和定制，比如添加动画效果、自定义关闭按钮、嵌入特定内容等功能。
总结来说，“弹出层，可拖动，仿discuz2.x 登录弹出”的实现涉及到了JavaScript交互、CSS布局和样式设计，以及浏览器兼容性的处理。通过这些技术，可以创建出既美观又实用的弹出层，提升用户的使用体验。在实际开发...
此案例展示了如何创建一个兼容IE6、IE8、Firefox（FF）和Chrome等浏览器的JavaScript弹出层。 ### 一、弹出层概述 在网页设计中，弹出层是一种常见的交互方式，用于展示额外的信息或功能。它通过JavaScript动态...
总的来说，实现"可拖动div层，兼容IE火狐等浏览器"涉及到HTML、CSS和JavaScript的综合应用，尤其是jQuery的使用，可以高效地创建出用户友好的交互体验。通过学习和理解这些文件，你可以掌握如何在自己的项目中创建...
- 兼容性处理：确保代码在不同浏览器（如IE、Firefox、Chrome等）上都能正常工作，可能需要使用条件语句或库如jQuery来处理浏览器差异。 - 拖动逻辑：使用事件监听和计算鼠标位置来更新元素的位置，同时处理边界...
下面我们将详细探讨如何使用div和css来实现这样的功能，并兼容主流浏览器，包括谷歌、火狐和IE6以上版本。 首先，我们需要理解div的基本概念。Div是HTML中的一个块级元素，全称为“division”，中文译为“分区”或...
7. **跨浏览器兼容性**：确保在IE和Firefox等主流浏览器上都能正常工作。 综上所述，这个压缩包文件很可能包含了一个实现上述功能的弹出层库或示例代码，用户可以通过引用和配置来实现自己的多皮肤自定义弹出层，...
JavaScript弹出层特效是一种在网页上创建浮动对话框或模态窗口的技术，常用于显示警告、确认信息、用户输入或复杂内容。在这个场景中，我们关注的是基于jQuery的弹出层插件——layer。Layer是一款功能强大且高度可...
这个技术基于HTML的`<div>`元素，通过CSS样式和JavaScript实现动态效果，以确保在各种主流浏览器如Chrome、Firefox、Safari、Edge以及Internet Explorer中都能正常工作。 1. **HTML基础**： - `<div>`标签：HTML中...
CSS3的过渡效果和伪类选择器使得弹出层的打开与关闭具有平滑的动画体验，同时，通过媒体查询实现不同设备上的适配，确保在手机和平板等移动设备上也能良好运行。 2. **JavaScript**: JavaScript是EasyDialog的动态...
8. **兼容性**：考虑到浏览器的多样性，这个插件应该兼容主流的浏览器，如Chrome、Firefox、Safari、Edge和旧版的IE。 在实际应用中，开发者需要将这个插件集成到他们的项目中，这通常涉及以下几个步骤： 1. **...
总的来说，"js弹出可移动的遮罩层"是利用JavaScript和CSS实现的一种网页交互效果，其关键在于理解并运用JavaScript事件处理、CSS定位和透明度属性，以及对浏览器兼容性的处理。通过不断实践和优化，我们可以创建出...
6. **兼容性**：layer组件通常对主流浏览器（如Chrome、Firefox、Safari、Edge和IE8+）有较好的兼容性。 解压密码为"www.cqlsoft.com"，这意味着你需要访问这个网址来获取解压文件的权限。在解压后，你将看到一个...
5. **兼容性**：AmazeUI广泛兼容主流浏览器，如Chrome、Firefox、Safari、Edge以及IE8+，确保了跨浏览器的稳定运行。 6. **插件扩展**：AmazeUI弹出窗可以与其他组件（如表单、下拉菜单等）结合使用，提供更丰富的...