dengwenjun
- 浏览: 214178 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
<!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>
<title>js弹出层代码(兼容多浏览器)</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body {
background: #FFFFFF;
color: #333333;
font-size: 12px;
}
input {
font-size: 12px;
}
/* js弹出层代码(兼容多浏览器)” */
/* ---------- begin ---------- */
.title {
height: 30px;
margin: 0px auto;
width: 950px;
}
.title .item, .title .itemA, .title .itemH {
background: url(http://www.111cn.net/blog/upload/image/20100810182751.jpg) no-repeat;
color: #000099;
cursor: pointer;
float: left;
font-size: 14px;
height: 29px;
width: 102px;
text-align: center;
line-height: 28px;
border: 1px solid #A4CEEC;
border-bottom: none;
}
.title .item {
background-position: 0px -1px;
}
.title .itemH {
background-position: 0px -30px;
}
.title .itemA {
background-position: 0px -59px;
border-color: #73C5FF;
color: #333333;
cursor: auto;
font-weight: bold;
height: 29px;
}
.title .space {
border-bottom: 1px solid #73C5FF;
float: left;
height: 29px;
width: 1px;
}
/* ---------- end ---------- */
/* Popup */
/* ---------- begin ---------- */
.popup {
position: absolute;
width: 489px;
}
.popup .shadow {
background: #999999;
width: 486px;
height: 192px;
position: absolute;
left: 3px;
top: 3px;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
.popup .main {
border: 1px solid #74C4FF;
height: 190px;
position: absolute;
width: 484px;
}
.popup .main .head {
background: #FFFFFF url(http://www.111cn.net/blog/upload/image/20100810182751.jpg) repeat-x 0px -197px;
border-bottom: 1px solid #74C4FF;
height: 25px;
width: 484px;
}
.popup .main .head .titleAlert, .popup .main .head .titleConfirm, .popup .main .head .titlePrompt {
background: url(http://www.111cn.net/blog/upload/image/20100810182751.jpg) no-repeat;
float: left;
height: 25px;
width: 100px;
}
.popup .main .head .titleAlert {
background-position: 0px -371px;
}
.popup .main .head .titleConfirm {
background-position: 0px -396px;
}
.popup .main .head .titlePrompt {
background-position: 0px -421px;
}
.popup .main .head .tail, .popup .main .head .tailH {
background: url(http://www.111cn.net/blog/upload/image/20100810182751.jpg) no-repeat;
float: right;
height: 25px;
width: 41px;
}
.popup .main .head .tail {
background-position: -60px -284px;
}
.popup .main .head .tailH {
background-position: -101px -284px;
}
.popup .main .head .tail .closeIcon, .popup .main .head .tailH .closeIcon {
background: url(http://www.111cn.net/blog/upload/image/20100810182751.jpg) no-repeat;
display: inline;
float: right;
font-size: 0px;
height: 18px;
margin: 3px 4px 0px 0px;
width: 19px;
cursor: pointer;
}
.popup .main .head .tail .closeIcon {
background-position: -142px -284px;
}
.popup .main .head .tailH .closeIcon {
background-position: -161px -284px;
}
.popup .main .body {
background: #FFFFFF;
height: 164px;
width: 484px;
}
.popup .main .body .iconError, .popup .main .body .iconWarning, .popup .main .body .iconEditing, .popup .main .body .iconSuccess {
background: url(http://www.111cn.net/blog/upload/image/20100810182751.jpg) no-repeat;
display: inline;
float: left;
height: 62px;
width: 60px;
margin: 30px 40px;
}
.popup .main .body .iconError {
background-position: -0px -222px;
}
.popup .main .body .iconWarning {
background-position: -60px -222px;
}
.popup .main .body .iconEditing {
background-position: -120px -222px;
}
.popup .main .body .iconSuccess {
background-position: 0px -284px;
}
.popup .main .body .element {
clear: right;
display: inline;
float: left;
height: 100px;
margin: 10px 0px;
width: 305px;
}
.popup .main .body .element .elementEntity {
height: 100px;
vertical-align: middle;
}
.popup .main .body .element .elementEntity .title {
font-size: 14px;
width: 100%;
}
.popup .main .body .element .elementEntity label {
font-weight: bold;
}
.popup .main .body .element .elementEntity span {
color: #FF0000;
}
.popup .main .body .element .elementEntity .input {
margin: 5px 0px;
border: 1px solid #A5ACB2;
font-size: 12px;
height: 14px;
padding: 2px;
width: 200px;
}
.popup .main .body .buttons {
text-align: center;
clear: both;
}
.popup .main .body .buttons .button {
display: inline;
height: 25px;
margin: 5px 10px;
width: 80px;
}
/* ---------- end ---------- */
/* 其他 */
/* ---------- begin ---------- */
.mask {
filter: alpha(opacity=70);
opacity: 0.7;
background: #FFFFFF;
position: absolute;
left: 0px;
top: 0px;
}
</style>
<script language="javascript">
function getElement(id) {
return document.getElementById(id);
}
function createElement(type) {
return document.createElement(type);
}
function removeElement(element) {
try {
if (element) {
element.parentNode.removeChild(element);
}
}
catch (e) {
}
}
function hideElement(element) {
if (element) {
element.style.display = "none";
}
}
function hideElementV(element) {
if (element) {
element.style.visibility = "hidden";
element.style.display = "";
}
}
function showElement(element) {
if (element) {
element.style.display = "";
element.style.visibility = "";
}
}
function clearElement(element) {
for (var i in element) {
try {
element[i] = null;
}
catch (e) {
continue;
}
}
}
function convertHTML(value) {
if (!value) {
return "";
}
return value.toString().split("<").join("<").split(">").join(">").split(" ").join(" ").split("&").join("&").split("<").join("<").split(">").join(">").split(" ").join(" ");
}
function GetOffsetPos(element) {
var flag = element.tagName.toUpperCase() == "INPUT" ? true : false;
var posTop = 0, posLeft = 0;
do {
posTop += element.offsetTop || 0;
posLeft += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
if (navigator.appVersion.indexOf("MSIE 6.0") != -1 && flag) {
posLeft++;
}
return [posLeft, posTop];
}
function getWindowSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return([myWidth,myHeight]);
}
function hideSelects(zIndexNow) {
if (navigator.appVersion.indexOf("MSIE 6.0") != -1) {
var selects = document.getElementsByTagName("select");
var length = selects.length;
for (var i = 0; i < length; i++) {
if (selects[i].zIndexNow != zIndexNow && selects[i].style.visibility != "hidden") {
selects[i].style.visibility = "hidden";
selects[i].zIndexNow = zIndexNow;
}
}
}
}
function showSelects(zIndexNow) {
if (navigator.appVersion.indexOf("MSIE 6.0") != -1) {
var selects = document.getElementsByTagName("select");
var length = selects.length;
for (var i = 0; i < length; i++) {
if (selects[i].zIndexNow == zIndexNow) {
selects[i].style.visibility = "";
selects[i].zIndexNow = -1;
}
}
}
}
var Mask = function () {
this.zIndexNow = 100;
this.maskDiv = null;
this.indexArr = [];
this.show = function () {
this.zIndexNow += 10;
if (this.indexArr.length == 0){
var maskHeight = document.documentElement.scrollHeight > getWindowSize()[1] ? document.documentElement.scrollHeight : getWindowSize()[1];
this.maskDiv = createElement("div");
this.maskDiv.onclick = function () {
var event = arguments[0] || window.event;
event.cancelBubble = true;
};
this.maskDiv.className = "mask";
this.maskDiv.style.width = "100%";
this.maskDiv.style.height = maskHeight + "px";
document.body.appendChild(this.maskDiv);
}
this.maskDiv.style.zIndex = this.zIndexNow - 1;
this.indexArr.push(this.zIndexNow - 1);
hideSelects(this.zIndexNow);
};
this.clean = function () {
showSelects(this.zIndexNow);
this.indexArr.pop();
if (this.indexArr.length > 0){
this.maskDiv.style.zIndex = this.indexArr[this.indexArr.length - 1];
this.zIndexNow = this.indexArr[this.indexArr.length - 1] + 1;
}
else {
document.body.removeChild(this.maskDiv);
this.zIndexNow = 100;
}
};
};
var DragAble = function (dragable,handler) {
this.iDiffX = 0;
this.iDiffY = 0;
this.oDragable = dragable;
this.oHandler = handler;
this.mouseDown = function(){
document.body.onselectstart = function () {return false;};
document.body.style.userSelect = "none";
document.body.style.MozUserSelect = "none";
var object = arguments.callee.object;
var event = arguments[0] || window.event;
object.iDiffX = event.clientX - object.oDragable.offsetLeft;
object.iDiffY = event.clientY - object.oDragable.offsetTop;
document.body.onmousemove = object.mouseMove;
document.body.onmouseup = object.mouseUp;
object.oHandler.style.cursor = "move";
};
this.mouseDown.object = this;
this.oHandler.onmousedown = this.mouseDown;
this.mouseMove = function() {
var object = arguments.callee.object;
var event = arguments[0] || window.event;
var wWidth = getWindowSize()[0];
if ((event.clientX - object.iDiffX) >= 0 && (event.clientX - object.iDiffX + object.oDragable.clientWidth) <= wWidth - 20){
object.oDragable.style.left = event.clientX - object.iDiffX + "px";
}
else {
if ((event.clientX - object.iDiffX) < 0){
object.oDragable.style.left = 0 + "px";
}
else {
object.oDragable.style.left = wWidth - object.oDragable.clientWidth - 20 + "px";
}
}
//obj.style.left = tempLeft + "px";
if ((event.clientY - object.iDiffY) >= 0){
object.oDragable.style.top = event.clientY - object.iDiffY + "px";
}
else {
object.oDragable.style.top = 0 + "px";
}
};
this.mouseMove.object = this;
this.mouseUp = function() {
var object = arguments.callee.object;
document.body.onselectstart = "";
document.body.style.userSelect = "";
document.body.style.MozUserSelect = "";
document.body.onmousemove = "";
document.body.onmouseup = "";
object.oHandler.style.cursor = "";
};
this.mouseUp.object = this;
};
var Popups = function (stringContainerId) {
this.containerElement = getElement(stringContainerId);
this.containerElement.onclick = function (){
var event = arguments[0] || window.event;
event.cancelBubble = true;
};
this.bindElement = function (stringTagName, stringClassName, objectContainerElement, objectContainer) {
var element = createElement(stringTagName);
element.className = stringClassName;
if (objectContainerElement) {
objectContainerElement.appendChild(element);
}
if (objectContainer){
element.container = objectContainer;
}
return element;
};
this.initializeElement = function (stringTitleIconClassName, stringIconClassName, booleanButtons, functionCallback) {
var container = this.bindElement("div", "popup");
container.bindElement = this.bindElement;
var shadow = this.bindElement("div", "shadow", container, container);
var main = this.bindElement("div", "main", container, container);
var head = this.bindElement("div", "head", main, container);
container.head = head;
var titleIcon = this.bindElement("div", stringTitleIconClassName, head, container);
container.titleIcon = titleIcon;
var tail = this.bindElement("div", "tail", head, container);
var closeIcon = this.bindElement("div", "closeIcon", tail, container);
closeIcon.backgroundElement = tail;
closeIcon.onmouseover = function () {
this.backgroundElement.className = "tailH";
};
closeIcon.onmouseout = function () {
this.backgroundElement.className = "tail";
};
closeIcon.onclick = function () {
this.container.remove();
};
var body = this.bindElement("div", "body", main, container);
container.body=body;
var icon = this.bindElement("div", stringIconClassName, body, container);
container.icon = icon;
var element = this.bindElement("div", "element", body, container);
var elementTable = createElement("table");
elementTableTrTd = elementTable.insertRow(0).insertCell(0);
elementTableTrTd.className = "elementEntity";
element.appendChild(elementTable);
container.element = elementTableTrTd;
var buttons = this.bindElement("div", "buttons", body, container);
container.buttons = buttons;
var buttonOk = this.bindElement("input", "button");
buttonOk.type = "button";
buttonOk.value = "确定";
buttonOk.container = container;
buttonOk.onclick = function () {
if (this.container.input) {
if (this.container.input.value == "") {
popups.createPopup("AlertError", "输入不能为空！").show();
this.container.input.focus;
}
else {
functionCallback(this.container.input.value);
this.container.remove();
}
}
else {
functionCallback(this.container);
this.container.remove();
}
};
container.buttonOk = buttonOk;
buttons.appendChild(buttonOk);
if (booleanButtons) {
var buttonCancel = this.bindElement("input", "button");
buttonCancel.type = "button";
buttonCancel.value = "取消";
buttonCancel.container = container;
buttonCancel.onclick = function () {
this.container.remove();
};
container.buttonCancel = buttonCancel;
buttons.appendChild(buttonCancel);
}
this.containerElement.appendChild(container);
hideElement(container);
container.show = function () {
this.style.left = (getWindowSize()[0] - 489) / 2 + document.documentElement.scrollLeft + "px";
this.style.top = (getWindowSize()[1] - 192) / 2 + document.documentElement.scrollTop + "px";
mask.show();
this.style.zIndex = mask.zIndexNow;
showElement(this);
var dragAble = new DragAble(this, this.head);
if (this.input) {
var setTimeoutFocus = function () {
arguments.callee.input.select();
};
setTimeoutFocus.input = this.input;
setTimeout(setTimeoutFocus, 1);
}
else {
this.buttonOk.focus();
}
};
container.remove = function () {
mask.clean();
removeElement(this);
};
container.hide = function () {
hideElement(this);
};
return container;
};
this.createPopup = function (stringType, stringNote, functionCallback) {
switch (stringType) {
case "AlertError":
var popup = this.initializeElement("titleAlert", "iconWarning", false, new Function());
popup.element.innerHTML = '<div class="title">' + stringNote + '</div>';
return popup;
break;
case "AlertSuccess":
var popup = this.initializeElement("titleAlert", "iconSuccess", false, new Function());
popup.element.innerHTML = '<div class="title">' + stringNote + '</div>';
return popup;
break;
case "Confirm":
var popup = this.initializeElement("titleConfirm", "iconEditing", true, functionCallback);
var line = createElement("div");
line.innerHTML = '<div class="title">' + stringNote + '<br /><div>';
popup.element.appendChild(line);
return popup;
break;
case "Prompt":
var combination = stringNote;
functionCallback.combination = combination;
var popup = this.initializeElement("titlePrompt", "iconEditing", true, functionCallback);
var line = createElement("div");
var arrayNote = stringNote;
line.innerHTML = '<div class="title">请输入<label>' + convertHTML(combination) + '</label>:<div>';
var input = createElement("input");
input.type = "text";
input.className = "input";
popup.input = input;
input.container = popup;
input.onkeydown = function () {
var event = arguments[0] || window.event;
switch (event.keyCode) {
case 13: //Enter
this.container.buttonOk.click();
break;
case 27: //Escape
this.container.remove();
break;
default:
break;
}
};
line.appendChild(input);
popup.element.appendChild(line);
return popup;
break;
}
};
};
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<input type="button" value="弹出窗口" onclick="ShowPop('Prompt')">
<input type="button" value="提示错误" onclick="ShowPop('AlertError')">
<input type="button" value="成功提示" onclick="ShowPop('AlertSuccess')">
<input type="button" value="提示确认" onclick="ShowPop('Confirm')">
<div id="popupContainer"></div>
<script type="text/javascript">
<!--
mask=new Mask();
popups=new Popups("popupContainer");
function ShowPop(showType)
{
mask=new Mask();//这两行挪到里面来
popups=new Popups("popupContainer");
popups.createPopup(showType,showType,CallBack).show();
}
function CallBack()
{
alert("回调方法！");
}
//-->
</script>
</body>
</html>
分享到：
发表评论
-
Math.round(Math.random() * 10000); //随机函数名
2013-07-23 18:05 1576Math.round(Math.random() * 1000 ... -
弹出div
2013-06-17 15:45 865<!DOCTYPE html PUBLIC " ... -
input type='file'的值的清理
2013-05-14 11:05 1093function refreshUploader(who){ ... -
js改变选择的行颜色
2013-05-08 09:56 0<html> <script> ... -
js实现表格选择行变色
2013-05-08 09:51 0<!DOCTYPE html PUBLIC " ... -
js 动态table crud
2013-04-27 17:36 1215<%@ page language="java ... -
js 获得文件大小
2013-04-27 17:37 1752<!DOCTYPE html PUBLIC " ... -
all the way around
2012-08-14 19:49 0all the way around,Bye Bye Bye, ... -
浏览器 跨域仿问
2010-07-23 16:45 923一种是修改firefox的设置，在firefox的地址栏中输入 ...
相关推荐
总结来说，"js弹出层可拖动兼容各大浏览器"涉及了JavaScript事件处理、DOM操作、CSS样式兼容、响应式设计以及用户交互优化等多个方面。通过掌握这些技术，开发者能够创建出一个在各种浏览器环境下都能流畅使用的可...
总之，jQuery弹出浮动层是网页交互设计中的常见工具，通过jQuery的便利性和强大的功能，我们可以轻松创建出具有拖动和透明效果，并且兼容多种浏览器的弹出层。这样的技术不仅提高了用户体验，也降低了开发和维护的...
在这个主题中，“javascript 弹出层兼容主流浏览器 非常漂亮”指的是创建了一个既美观又能在各种主流浏览器中正常工作的弹出层解决方案。下面我们将详细讨论相关的知识点。 首先，我们需要关注的是浏览器兼容性。在...
综上所述，实现"div 弹出层遮罩 兼容各大浏览器"涉及了HTML布局、CSS样式设计、JavaScript交互以及浏览器兼容性处理等多个方面。在实际开发中，我们还需要结合项目需求，考虑用户体验和性能优化，以打造出高效且易用...
js+超酷弹出层+兼容各大浏览器,多种javascript的弹出层
弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容弹出层 拖动 兼容 弹出层 拖动 ...
本项目"弹出层兼容所有浏览器"是基于jQuery实现的，旨在确保在各种不同的浏览器环境下都能正常工作。下面将详细讨论弹出层的基本概念、jQuery在其中的作用以及如何实现跨浏览器兼容性。 首先，弹出层通常包含对话框...
然而，由于各浏览器之间的差异，实现跨浏览器的弹出层兼容性是一项挑战。本文将深入探讨如何利用jQuery实现弹出层在所有浏览器上的兼容性。 一、理解jQuery弹出层基础 jQuery弹出层通常是通过操纵DOM元素，结合CSS...
在IT行业中，网页开发是一项关键任务，而创建一个兼容所有浏览器的登录弹出层是确保用户体验一致性和流畅性的重要步骤。本文将详细讲解如何实现这样一个功能，并分享一个模仿Win7风格的弹出层实例。 首先，我们需要...
标题"弹出层全屏半透明（浏览器全兼容）"揭示了我们要讨论的关键技术点：弹出层的实现、全屏覆盖以及在各种浏览器上的兼容性，特别是包括了老版本的IE6。以下是关于这些知识点的详细说明： 1. **弹出层（Pop-up ...
接着，JavaScript代码“Dialog.js”则是实现弹出层动态显示、隐藏以及交互功能的关键。JavaScript库可能提供了如下的功能： 1. 显示和隐藏弹出层：通过改变CSS的display属性，可以轻松地控制弹出层的可见性。 2. ...
综上所述，这个示例代码提供了一种实现JavaScript弹出层并实现拖动和跨浏览器兼容性的方法。开发者可以通过这个基础框架，根据实际项目需求进行扩展和定制，比如添加动画效果、自定义关闭按钮、嵌入特定内容等功能。
总结来说，创建一个可拖动且兼容各大浏览器的JavaScript弹出层涉及到了HTML结构、CSS样式、JavaScript事件处理和浏览器兼容性策略。通过精心设计和测试，我们可以为用户提供一致且流畅的用户体验，无论他们使用的是...
【JavaScript 弹出层实现与浏览器兼容性】 在网页开发中，JavaScript 弹出层（通常称为对话框或模态窗口）是一种常见的交互设计元素，用于显示临时信息、用户确认或进行复杂操作。本文将详细讲解如何创建一个可拖动...
在"js弹出div获取弹出层中文本值"这个场景中，我们将讨论如何利用JavaScript实现这一功能，并确保它在主流浏览器如IE6+、Firefox（ff）等上兼容。 首先，我们需要创建一个可隐藏的div元素作为弹出层，然后在需要的...
"超漂亮的仿腾讯弹出层效果（兼容主流浏览器）"这个项目旨在提供一个美观且实用的弹出层解决方案，它不仅注重视觉吸引力，同时也确保在各种主流浏览器上的良好兼容性。这样的设计对于提升网站互动性和用户体验有着...
由于没有具体的压缩包文件内容，我们无法详细分析代码实现，但可以从标签“弹出层”推测，这个压缩包可能包含一个或多个示例文件，如HTML、CSS和JavaScript文件，展示了如何创建和应用弹出层。文件名“339”可能是...