在JS弹出的遮罩层中，部分区域高亮显示并且可以编辑 -

lijun0349

浏览: 315857 次
性别:
来自: 北京

最近访客更多访客>>

huangyique

limengna845567

myf1228

javawang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

在JS弹出的遮罩层中，部分区域高亮显示并且可以编辑

博客分类：

JavaScript

UI JavaScript

1. 初始页面效果如下所示：

2. 点击“点击一下试试！”链接后，页面效果如下所示：

<!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" />
    </head>
    <body>
		111111111<p/>
		111111111<p/>
		111111111<p/>
		111111111<p/>
		111111111<p/>
		111111111<p/>
		111111111<p/>
		111111111<p/>
        <table border="1" align="center" width="700px">
            <tr>
                <td width="300px" height="200px">
                    <div id="content">
                        <a href="#">
                            点击一下试试！
                        </a>
                    </div>
                </td>
                <td style="vertical-align:top">
					<div id="signSpanId" style="position:absolute;"></div>
                    <div id="alert" align="top">
                        <h4>
                            <span>
                                这是高亮显示区域
                            </span>
                        </h4>
                        <p>
                            <label>
                                用户名
                            </label>
                            <input type="text" />
                        </p>
                        <p>
                            <label>
                                密　码
                            </label>
                            <input type="password" />
                        </p>
                        <p>
                            <input type="submit" value="注册" />
                            <input type="reset" value="重置" />
                        </p>
                    </div>

                </td>
		<td width="100px">
                    <div>
                        这是第三列
                    </div>
                </td>
            </tr>
        </table>
        <script type="text/javascript">
            var myAlert = document.getElementById("alert");
            var reg = document.getElementById("content").getElementsByTagName("a")[0];
            reg.onclick = function() {
                myAlert.style.background = "#e2ecf5";
                myAlert.style.zIndex = "501";
                myAlert.style.position = "absolute";
				
				var signSpan = document.getElementById("signSpanId");
				myAlert.style.top = signSpan.offsetTop;
				myAlert.style.left = signSpan.offsetLeft;

                mybg = document.createElement("div");
                mybg.setAttribute("id", "mybg");
                mybg.style.background = "#000";
                mybg.style.width = "100%";
                mybg.style.height = "100%";
                mybg.style.position = "absolute";
                mybg.style.top = "0";
                mybg.style.left = "0";
                mybg.style.zIndex = "500";
                mybg.style.opacity = "0.3";
                mybg.style.filter = "Alpha(opacity=30)";
                document.body.appendChild(mybg);

                //document.body.style.overflow = "hidden";
            }
        </script>
    </body>
</html>

查看图片附件

分享到：

如何查询网站二级目录下的网页被百度等搜索 ... | IE9浏览器下使用JS获取图片尺寸大小的 ...

2012-11-13 10:37
浏览 3167
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

在JS弹出的遮罩层中，部分区域高亮显示并且可以编辑

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

在JS弹出的遮罩层中，部分区域高亮显示并且可以编辑

评论

发表评论

相关推荐

JS加减乘除运算

JS 利用正则表达式替换字符串

JS验证

JS常用方法

IE9浏览器下 使用JS获取图片尺寸大小 的方法

JS遍历某个目录下的所有文件名

JAVASCRIPT----style 中visibility和display之间的区别

javascript自定义右键菜单

javascript仿照google搜索框自动补全(可以输入一个“管”字查看效果。)

javascript在线将汉字翻译为汉语拼音，可选择翻译中汉字对照

点击链接弹出"图片另存为"而不是直接打开

javascript实现页内搜索

jst实现MD5加密

javascript图片型按钮

javascript页面loading效果

上传附件界面设计

js停止输出

网站后台左右收缩型页面脚本

JavaScript仿LightBox内容显示效果

文本框点击时文字消失，失去焦点时文字出现

最近访客更多访客>>

IE9浏览器下使用JS获取图片尺寸大小的方法