如何使HTML看起来处于禁用状态？

Question

如何使HTML看起来处于禁用状态？

5

我在一些论坛上看到，使HTML表格看起来像是被禁用的方法是添加一个div层。我的问题是我不知道该怎么做。

我有三个问题：

1. 如何设置div的高度，使其在表格增加行时自动调整为表格高度。 2. 如何使div覆盖表格。我不知道如何叠加HTML元素。 3. 我该如何编写JavaScript代码，在单击“禁用”按钮时使我的表格看起来被禁用，并在单击“启用”按钮时再次启用它。

<html>
<head>
<script type="text/javascript">

</script>
<style type="text/css">
 table#tblTest {
  width: 100%;
  margin-top: 10px;
  font-family: verdana,arial,sans-serif;
  font-size:12px;
  color:#333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
 }

 table#tblTest tr.highlight td {
  background-color: #8888ff;
 }

 table#tblTest tr.normal {
  background-color: #ffffff;
 }

 table#tblTest th {
  white-space: nowrap; 
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
 }

 table#tblTest td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
 }

 #disabler {
  width: 100%;
  height: 200px;
  background-color: #bbb;
  opacity:0.6;
 }
</style>
</head>

<body>

 <div id="disabler"></div>

 <table id="tblTest">
  <thead>
   <tr>
    <th>Name</th>
    <th>Address</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tom</td>    
    <td>UK </td>
   </tr>
   <tr>
    <td>Henrik</td> 
    <td>Denmark</td>
   </tr>
   <tr>
    <td>Lionel</td> 
    <td>Italy</td>
   </tr>
   <tr>
    <td>Ricardo</td>    
    <td>Brazil</td>
   </tr>
   <tr>
    <td>Cristiano</td>  
    <td>Portugal</td>
   </tr>
  </tbody>
 </table>
 <input type="button" onclick="disable = true;" value="Disable" />
 <input type="button" onclick="disable = false;" value="Enable" />
</body>
</html>

我有一个名为disabler的div来实现禁用，但我无法将其覆盖在表格上。

请帮助我解决这个问题。我对这方面非常新手。

- NinjaBoy

2

建议使用jQuery BlockUI。演示：http://jquery.malsup.com/block/#demos - Riz

1

我认为在涉足一些高级技术之前，我需要先学习原生JavaScript。此外，我需要学习JavaScript因为我需要为一场考试做准备。 - NinjaBoy

1

你所说的“看起来禁用”是什么意思？用户仍然可以从中选择文本吗？它是否需要具有在禁用控件上看到的边框和阴影效果？ - Salman A

有没有可能禁用文本选择？我想让它看起来像一个已禁用的控件。 - NinjaBoy

2个回答

1

您需要将 div disabler 放在表格的顶部。

您可以通过绝对定位 div 来实现。我添加了一个新的 div，tableContainer，包含 disabler div 和表格，并对该 div 进行了绝对定位。

<div id="tableContainer">   <!-- New Div-->
   <div id="disabler"></div>
   <table>....<table>
</div>

在 #disabler 加入 position: absolute;

并且最重要的是，编写 JavaScript 来显示和隐藏该 div：

function disableTable()
{
  document.getElementById("disabler").style.display = "block";
}

function enableTable()
{
  document.getElementById("disabler").style.display = "none";
}

实时示例：http://jsbin.com/icuwug

- Nivas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob W · Accepted Answer

如果你想让“disabler”元素覆盖在表格上方，请给它添加一个负的底部外边距。此外，将不透明度设置为小于1的值，以避免完全覆盖（隐藏）其后面的表格。

 #disabler {
     opacity: 0.5;
     margin-bottom: -200px;
 }

由于您提到了这是为了教育目的，我不会提供完整的解决方案。请参考这个例子来开始。

如果您想使文本看起来“无法选择”，请使用以下CSS：

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;