作者：雨天是最美 | 2023-09-04 16:03
有没有人知道使用JavaScript或CSS的方式来基本上灰化HTML中的表单/ div的某个部分？
我有一个" 用户个人资料 "表单,我想为" 非高级 "成员禁用部分内容,但希望用户查看表单背后的内容并在其上放置" 号召性用语 ".
有没有人知道通过CSS或JavaScript做到这一点的简单方法？
编辑:我将确保表单在服务器端不起作用,因此CSS或JavaScript就足够了.
1> dacracot..：
将其添加到您的HTML:
这是你的CSS:
.darkClass
{
background-color: white;
filter:alpha(opacity=50); /* IE */
opacity: 0.5; /* Safari, Opera */
-moz-opacity:0.50; /* FireFox */
z-index: 20;
height: 100%;
width: 100%;
background-repeat:no-repeat;
background-position:center;
position:absolute;
top: 0px;
left: 0px;
}
最后用JavaScript关闭它:
function dimOff()
{
document.getElementById("darkLayer").style.display = "none";
}
function dimOn()
{
document.getElementById("darkLayer").style.display = "";
}
更改darkClass的尺寸以适应您的目的.
将
改为
不要忘记在这个darkClass组件的父级上设置`position:relative`.
2> Mike..：
您可以尝试使用jQuery BlockUI插件.如果你不介意依赖jQuery,它非常灵活且易于使用.它支持元素级阻塞以及覆盖消息,这似乎是您所需要的.
使用它的代码很简单:
$('div.profileform').block({
message: 'Premium Users only
',
});
您还应该记住,您可能仍然需要某种服务器端保护,以确保非Premium用户无法使用您的表单,因为如果他们使用某些内容,人们很容易访问表单元素像Firebug.
推荐阅读
-
如何解决《如何使用jQuery选择具有相似属性的元素？》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《C++sizeofVector是24？》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《java.lang.ClassNotFoundException:javax.net.ssl.SSLSocketFactory在WildFly8.2.0上使用JAVA8时使用resteasy》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《'npmtest'的Jest失败,"在严格模式下使用const"》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《如何将FabricJS画布的背景图像设置为来自Web服务的图像？》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《在PHPCLI中使用并行线程运行大循环》经验，为你挑选了0个好方法。 ...
[详细]
-
如何解决《如何使用while循环解决未定义的属性？》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《UIBootstrapAnchor在AccordionHeading中不起作用》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《ReactFixedDataTable响应行/单元格大小》经验，为你挑选了0个好方法。 ...
[详细]
-
如何解决《Golang-无法使cookie过期》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《静态工厂方法和模拟》经验，为你挑选了0个好方法。 ...
[详细]
-
如何解决《需要javaregex才能获得特定的输出》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《无法访问pdf生成中的封闭流》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《JSX元素类型“XXX”没有任何构造或调用签名》经验，为你挑选了0个好方法。 ...
[详细]
-
如何解决《ASPMVC4返回json复杂对象》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《在Elixir应用程序中加载Erlang项目》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《使用循环在Jenkins中使用build-flow插件运行并行构建》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《自定义JHipster》经验，为你挑选了2个好方法。 ...
[详细]
-
如何解决《浏览器同步未使用代理加载ASP.NET5网站》经验，为你挑选了0个好方法。 ...
[详细]
-
如何解决《cakephp3编辑用户用户名和密码-无法找到当前实体的表类》经验，为你挑选了1个好方法。 ...
[详细]
京公网安备 11010802040832号 | 京ICP备19059560号-6 