Question

我的下面有一些代码，其中包含一个包含hiddenTable元素的表单，单击search按钮后会显示该元素。我的问题是：如何在一个模态弹出窗口中显示该表，同时仍然将它分开为同一个表单。该表包含注释框和提交按钮，我希望将注释与表单中的所有其他字段数据一起提交。

<!DOCTYPE html>
<html>
<head>
    <style>
    #hiddenStuff {
        display: none;
    }
    </style>
</head>
<body>

<form action="...">
    // search fields here
    <input type="button" 
value="Search" 
onclick="document.getElementById('hiddenTable').style.display='block';">

  <table id="hiddenTable" class="form_table" style="display:none;">
    <tr>
      <td class="form_field_name">Enter a comment</td>
    </tr>

    <tr>
      <td class="form_field_entry">
        <textarea required ="true" 
name="textarea" rows="10" 
cols="50" 
placeholder="Please enter a description for the performed task."></textarea>
      </td>
    </tr>
    <tr>
      <td class="form_field_entry">
        <cfinput type="submit" name="createPeriod" value="Submit"/>
      </td>
    </tr>
   </table>
</form>

</body>
</html>

请原谅我凌乱的代码。

Answer 1

我同意@Dan对于ux立场来说这可能是一个额外模态的痛苦，但如果这是你想要的结果，你可以在div中包围你的表并添加javascript以使框“弹出” ”。添加CSS样式以在点击时创建黑色透明背景，您将有一个非常简单的模态弹出窗口。

我为参考创建了一个codepen - http://codepen.io/anon/pen/brEHI

如何在模式弹出窗口中显示一个表格，该窗口是较大表单的一部分

1 个答案: