有沒有人知道用JavaScript或CSS將HTML中表單/div的某個部分變灰的方法？

我有一個“用戶資料”表單，我想禁用“非高級”成員的一部分，但希望用戶看到表單后面的內(nèi)容，并在它上面放置一個“行動呼吁”。

有人知道通過CSS或JavaScript實現(xiàn)這一點的簡單方法嗎？

編輯:我會確保表單不會在服務(wù)器端工作，所以CSS或JavaScript就足夠了。

將此添加到您的HTML中:

<div id="darkLayer" class="darkClass" style="display:none"></div>

這是你的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來關(guān)閉和打開它:

function dimOff()
{
    document.getElementById("darkLayer").style.display = "none";
}
function dimOn()
{
    document.getElementById("darkLayer").style.display = "";
}

改變黑暗等級的尺寸來適應(yīng)你的目的。

你可以試試jQuery BlockUI插件。如果你不介意對jQuery的依賴，它非常靈活且易于使用。它支持元素級的阻塞以及覆蓋消息，這似乎正是您所需要的。

使用它的代碼非常簡單:

$('div.profileform').block({
    message: '<h1>Premium Users only</h1>',
});

您還應(yīng)該記住，您可能仍然需要某種服務(wù)器端保護來確保非高級用戶不能使用您的表單，因為如果人們使用Firebug之類的東西，他們將很容易訪問表單元素。

如果你依靠CSS或JavaScript來阻止用戶編輯表單的一部分，那么可以通過禁用CSS或JavaScript來輕松規(guī)避。

一個更好的解決方案可能是在非高級成員的表單之外顯示不可編輯的信息，但包括高級成員的相關(guān)表單字段。

我有時造型& quot禁用& quot像這樣的用戶界面:

-webkit-filter: saturate(0%);
filter: saturate(0%);
opacity: 0.6;
pointer-events: none;

.disabled {
  -webkit-filter: saturate(0%);
  filter: saturate(0%);
  opacity: 0.6;
  pointer-events: none;
}

div {
  background: lime;
  font-size: 2rem;
  margin-bottom: 2rem;
  padding: 2rem;
}

a {
  color: blue;
}

button {
  background: red;
  color: white;
}

<h2>Enabled:</h2>

<div>
  <a href="#">I'm a link</a>
  <button>I'm a button</button>
</div>

<h2>Disabled:</h2>

<div class="disabled">
  <a href="#">I'm a link</a>
  <button>I'm a button</button>
</div>