`
piperzero
  • 浏览: 3555012 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

一个不错的弹出窗口的js效果(值的收藏)

阅读更多
<script type="text/javascript" language="javascript">
//more javascript from http://www.smallrain.net
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=100;//提示窗口的高度
titleheight=25 //提示窗口标题高度
bordercolor="#c51100";//提示窗口的边框颜色
titlecolor="#c51100";//提示窗口的标题颜色

var sWidth,sHeight;
sWidth=screen.width;
sHeight=screen.height;

var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);

var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";

var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="关闭";
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.getElementById("msgDiv").appendChild(txt);
}
</script>




<input type="button" value="点击这里" onclick="sAlert('test弹窗效果');" />
分享到:
评论

相关推荐

    51CTO下载-js实现精简弹出层特效

    "51CTO下载-js实现精简弹出层特效"这个标题暗示我们将会探讨如何使用JavaScript来创建一个功能丰富的弹出层(也称为模态窗口或对话框),这是一种在网页上展示信息、确认用户操作或进行交互的有效方式。 描述中提到...

    javascript经典效果

    10. **定时弹出窗口**:利用`setTimeout`函数延迟执行指定的函数,如`window.open()`用于打开新窗口。 **鼠标旁边的提示信息**:这种效果通常使用`title`属性来实现,当鼠标悬停在元素上时,会显示该属性的值作为...

    JavaScript网页特效范例宝典源码

    1.1 弹出窗口控制 2 实例001 打开新窗口显示广告信息 2 实例002 定时打开窗口 4 实例003 通过按钮创建窗口 5 实例004 自动关闭的广告窗口 6 实例005 控制弹出窗口居中显示 7 实例006 弹出的窗口之Cookie控制 9 实例...

    程序天下:JavaScript实例自学手册

    12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的警告框 12.22 屏蔽状态栏的错误提示 12.23 获取模式窗口的值 第13章 日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期...

    《程序天下:JavaScript实例自学手册》光盘源码

    12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的警告框 12.22 屏蔽状态栏的错误提示 12.23 获取模式窗口的值 第13章 日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期...

    70款经典Dreamweaver插件

    MX128577_ultimatewindows 建立一个可自定义属性的弹出窗口,亦可建立一个居中的窗口 WordCount 字数统计 PreviousPage 建立返回前一页的超链接 PageTransitions 进入、退出页面的过渡转场效果,比如从中间打开、...

    Dreamweaver 插件集

    建立一个可自定义属性的弹出窗口,亦可建立一个居中的窗口 WordCount 字数统计 PreviousPage 建立返回前一页的超链接 PageTransitions 进入、退出页面的过渡转场效果,比如从中间打开、溶解...... Meta_Generator ...

    常用经典Javascript代码

    弹出窗口大小控制 ```javascript var Windowsheight = 100; var Windowswidth = 100; var numx = 5; function openwindow(thelocation) { temploc = thelocation; if (!(window.resizeTo && document.all) && !...

    JavaScript实用范例词典04-14

    5.42 允许调整弹出窗口的大小... 143 5.43 弹出一个顶层窗口... 144 5.44 关闭窗口... 145 5.45 在主窗口上关闭弹出式窗口... 146 5.46 在弹出式窗口上关闭主窗口... 146 5.47 将主窗口中的资料输出到弹出式 ...

    JavaScript实例精通

    14_11.htm 自动弹出式窗口。 14_12.htm 自动滚屏。 第15章(\15) 示例描述:JavaScript操作表格和DOM。 15_1.htm 动态添加表格。 15_2.htm 获取表格的某行。 15_3.htm 获取某个表格的单元格。 15_4....

    《JavaScript实例精通》[源代码]

    14_11.htm 自动弹出式窗口。 14_12.htm 自动滚屏。 第15章(\15) 示例描述:JavaScript操作表格和DOM。 15_1.htm 动态添加表格。 15_2.htm 获取表格的某行。 15_3.htm 获取某个表格的单元格。 15_4....

    107个常用Javascript语句

    ### 107个常用JavaScript语句解析 #### 1. `document.write("")` - **功能**:在页面上写入指定的内容。 - **应用场景**:适用于简单的测试或页面加载时输出信息。 - **示例代码**: ```javascript document....

    Javascript中最常用的经典技巧

    - **知识点**: 使用 `confirm` 函数可以在执行某个动作之前弹出一个确认对话框。 - **应用场景**: - 在执行删除等不可逆操作前,增加一层确认机制,防止误操作。 #### 十一、获取元素的绝对位置 - **知识点**: ...

    一些网页特效代码小集.pdf

    使用`window.open()`函数创建一个新的弹出窗口,可以自定义窗口的属性,如`toolbar=no, status=no,menubar=no, scrollbars=no,resizable=no`分别控制工具栏、状态栏、菜单栏和滚动条的显示,`width`和`height`设置...

    收藏的一些网页的静态特效

    - 弹出框/模态窗口:用于显示详细信息或对话框。 - 导航菜单:动态展开、收起,或者带有平滑过渡的菜单。 - 图表和图形:如进度条、饼图、柱状图等。 - 提示信息:如提示框、警告提示等。 7. **学习与应用** ...

    javascript

    如果文本框为空,会弹出警告对话框显示“cuo”。 3. **响应式脚本**: - `response.write` 语句用于在服务器端输出JavaScript代码,例如在提交表单后提示用户操作成功或失败,并控制页面跳转。 4. **阻止默认行为...

    javascript特效

    在网页中添加一个按钮或链接,允许用户将当前页面添加到浏览器收藏夹。这通常通过调用浏览器的`addFavorite`方法来实现,但需要注意的是,这个方法并不在所有浏览器中都可用,特别是对于非IE浏览器。 #### 七、去除...

    包含一些常用js源码

    使弹出窗口居中显示于屏幕中央。 ```javascript &lt;script language="javascript"&gt; self.moveTo(0, 0); self.resizeTo(screen.availWidth, screen.availHeight); ``` - **实现原理**: - 使用`moveTo`和`resizeTo`...

Global site tag (gtag.js) - Google Analytics