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

最新推荐文章于 2022-09-13 11:53:05 发布

原创最新推荐文章于 2022-09-13 11:53:05 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#UI #JavaScript #ViewUI

JavaScript 专栏收录该内容

31 篇文章

订阅专栏

本文展示了如何通过HTML、CSS和JavaScript实现页面元素间的交互，并利用DOM操作调整元素位置，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 初始页面效果如下所示：
[img]http://dl.iteye.com/upload/attachment/0076/5087/56e355c2-5618-35f0-81b1-56b619ea5740.png[/img]
2. 点击“点击一下试试！”链接后，页面效果如下所示：
[img]http://dl.iteye.com/upload/attachment/0076/5089/284322bf-37c6-38f0-b42f-2cc9ac76a0ab.png[/img]


<!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>