这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
页面比较丑,只把功能实现了。^ ^
本文为大家介绍下使用 javascript 实现的弹出层背景置灰 - 模拟 (easyui dialog) 具体实现如下,感兴趣的朋友可以参考下
- <title>
- 模仿easyui dialog的效果
- </title>
- <script>
- //取得页面元素
- var getElement = function() {
- return document.getElementById(arguments[0]) || false;
- }
- function openDialog(dialogId) {
- var maskId = "mask";
- //如果有,先删除原来的
- if (getElement(dialogId)) {
- document.removeChild(getElement(dialogId)); //删除操作:弹出的div
- }
- if (getElement(maskId)) {
- document.removeChild(getElement(maskId)); //删除操作:弹出的不可操作(面具)层
- }
- //背景置灰
- var maskDiv = document.createElement("div");
- maskDiv.id = maskId;
- maskDiv.style.position = "absolute";
- maskDiv.style.zIndex = "1";
- maskDiv.style.width = document.body.scrollWidth + "px";
- maskDiv.style.height = document.body.scrollHeight + "px";
- maskDiv.style.top = "0px";
- maskDiv.style.left = "0px";
- maskDiv.style.background = "gray";
- maskDiv.style.filter = "alpha(opacity=10)";
- maskDiv.style.opacity = "0.30"; //透明度
- document.body.appendChild(maskDiv); //向body之中增加背景层
- //Dialog
- var dialogDiv = document.createElement("div");
- dialogDiv.id = dialogId;
- dialogDiv.style.position = "absolute";
- dialogDiv.style.zIndex = "9999";
- dialogDiv.style.width = "400px";
- dialogDiv.style.height = "200px";
- dialogDiv.style.top = (parseInt(document.body.scrollHeight) - 200) / 2 + "px"; // 屏幕居中
- dialogDiv.style.left = (parseInt(document.body.scrollWidth) - 400) / 2 + "px"; // 屏幕居中
- dialogDiv.style.background = "white";
- dialogDiv.style.border = "1px solid gray";
- dialogDiv.style.padding = "5px";
- dialogDiv.innerhtml = "(Dialog Content)";
- //Dialog之中的关闭操作:关闭背景层和Dialog层
- var closeControlloer = document.createElement("a"); //创建一个超链接(做为关闭的触发)
- closeControlloer.href = "#";
- closeControlloer.innerHTML = "关闭";
- closeControlloer.onclick = function() {
- document.body.removeChild(getElement(dialogId)); //删除diaglog
- document.body.removeChild(getElement(maskId)); //删除背景层
- }
- dialogDiv.appendChild(closeControlloer); //dialog之中增加"关闭"操作
- document.body.appendChild(dialogDiv); //body之中增加dialog
- }
- </script>
- <a href="#" onclick="openDialog('dialog');">
- Open Dialog
- </a>
来源: http://www.phperz.com/article/17/0413/277642.html