作者badcock
提取自ZCMS的弹出层，无外部css文件，引用Dialog.js即可使用，兼容主流浏览器，支持ie6下的阴影和半透明效果，
先看效果图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>【强烈推荐】 超漂亮的仿腾讯弹出层效果（兼容主流浏览器）</title>
<style>
body {background: #ffffff; color: #444;}
a{ color: #09d; text-decoration: none; border: 0; background-color: transparent;}
body,div,q,iframe,form,h5{ margin: 0; padding: 0;}
img,fieldset { border: none 0; }
body,td,textarea { word-break: break-all; word-wrap: break-word; line-height:1.5;}
body,input,textarea,select,button { margin: 0; font-size: 12px; font-family: Tahoma, SimSun, sans-serif;}
div,p,table,th,td { font-size:1em; font-family:inherit; line-height:inherit;}
h5{ font-size:12px;}
</style>
<script type="text/javascript" src="http://www.5-studio.com/wp-content/uploads/2009/06/Dialog.js"></script>
<script type="text/javascript">
function $(ele) {
if (typeof(ele) == 'string'){
ele = document.getElementById(ele)
if(!ele){
return null;
}
}
if(ele){
Core.attachMethod(ele);
}
return ele;
}
var Core = {};
Core.attachMethod = function(ele){
if(!ele||ele["$A"]){
return;
}
if(ele.nodeType==9){
return;
}
var win;
try{
if(isGecko){
win = ele.ownerDocument.defaultView;
}else{
win = ele.ownerDocument.parentWindow;
}
for(var prop in $E){
ele[prop] = win.$E[prop];
}
}catch(ex){
//alert("Core.attachMethod:"+ele)//有些对象不能附加属性，如flash
}
}
function zOpenD(){
var diag = new Dialog("Diag1");
diag.Width = 900;
diag.Height = 400;
diag.Title = "弹出窗口示例";
diag.URL = "http://demo.zving.com/";
diag.ShowMessageRow = true;
diag.MessageTitle = "弹出窗口示例";
diag.Message = "在这儿你可以对这个窗口的内容或功能作一些说明";
diag.OKEvent = zAlert;//点击确定后调用的方法
diag.show();
}
function zOpen(){
var diag = new Dialog("Diag2");
diag.Width = 900;
diag.Height = 400;
diag.Title = "弹出窗口示例";
diag.URL = "http://demo.zving.com/";
diag.OKEvent = zAlert;//点击确定后调用的方法
diag.show();
}
function zAlert(){
Dialog.alert("滤爸要来了，河谐你，河谐我，河谐二十一世纪的新一代");
}
function zConfirm(){
Dialog.confirm('警告：您确认要XXOO吗？',function(){Dialog.alert("yeah，周末到了，正是好时候");});
}
function sometext(ele,n){
var strArr=["可","以","清","心","也"];
var writeStr=""
for(i=0;i<n;i++){
index=parseInt(Math.random()*5);
for(j=0;j<5;j++){
str=index+j>4?index+j-5:index+j;
writeStr+=strArr[str];
}
}
$(ele).innerHTML=writeStr;
}
</script>
</head>
<body>
<div id="div1"></div>
<p> <input type="button" value="弹出新窗口" onclick="zOpen()" /> <input type="button" value="弹出带说明的新窗口" onclick="zOpenD()" /> <input type="button" value="弹出信息提示对话框" onclick="zAlert()" /> <input type="button" value="弹出选择对话框" onclick="zConfirm()" /></p>
<div id="div2"></div>
<script>sometext("div1",100);sometext("div2",300);</script>
</body>
</html>
分享到：
相关推荐
在本案例中，"超级漂亮的弹出层效果"指的是设计精美、用户体验良好的弹出层实现。这种效果能够提升用户的互动体验，增加网站或应用的吸引力。以下将详细介绍弹出层的设计原则、实现方法及可能涉及的技术点。 首先，...
本实例是基于JavaScript实现的一个“超漂亮的仿腾讯弹出层效果”，旨在为开发者提供一个美观且实用的弹出层解决方案。下面我们将详细探讨这个实例中涉及的技术点。 首先，我们来分析“仿腾讯弹出层效果”这一概念。...
这篇文章将深入探讨如何实现超漂亮的仿腾讯弹出层效果，并且该效果兼容主流浏览器。首先，我们要明白“弹出层”或“对话框”在网页设计中的重要性，它们是提供用户交互和信息提示的关键元素。腾讯作为一家知名的...
今天我们要讨论的是一个名为"超漂亮的仿腾讯弹出层效果"的主题，它涉及到网页设计中的弹出层技术，以及如何通过模仿腾讯的界面设计来创建美观且功能强大的用户界面。 首先，我们来理解什么是弹出层。在网页设计中，...
超漂亮的仿腾讯弹出层，好看好用，用法如下 在<head></head>中加入如下代码 body {background: #ffffff; color: #444;} a{ color: #09d; text-decoration: none; border: 0; background-color: transparent;} body...
"超漂亮的仿腾讯弹出层效果（兼容主流浏览器）"这个项目旨在提供一个美观且实用的弹出层解决方案，它不仅注重视觉吸引力，同时也确保在各种主流浏览器上的良好兼容性。这样的设计对于提升网站互动性和用户体验有着...
本教程将详细讲解如何利用jQuery实现"很炫很酷的弹出层效果"。 首先，我们需要理解弹出层（Modal）的概念。弹出层是一种在用户操作时突然出现在主页面上的窗口，通常用于显示详细信息、提示信息或进行表单填写等。...
在本文中，我们将深入探讨如何使用jQuery来实现很炫很酷的弹出层效果，包括显示图片、Flash以及设置自动隐藏功能，将其作为操作提示。jQuery是一个轻量级的JavaScript库，它极大地简化了DOM操作、事件处理以及动画...
"超酷弹出层特效"是指通过精心设计和编程实现的一种高级交互效果，旨在提升用户体验，使弹出层在视觉上更吸引人，并且在操作上更流畅。这个主题特别提到了"仿新浪"，意味着这种特效可能受到了新浪网站某些弹出层设计...
JavaScript弹出层效果是网页设计中常见的交互元素，主要用于显示重要的信息、提示或者进行用户交互。在本案例中，"JavaScript弹出层效果代码"是一个实现点击后弹出层淡入淡出效果的功能，通常用于增强用户体验，使...