У меня есть код ниже, который содержит форму, содержащую элемент 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>
Пожалуйста, извините мой грязный код.
Я согласен с @Dan в том, что это может быть болью для ux-точки зрения, чтобы сделать это дополнительным модальным, но если этот результат вам нужен, вы можете окружить свою таблицу в div и добавить javascript, чтобы сделать поле "всплывающее окно". Добавьте стили CSS, чтобы создать черный прозрачный фон при нажатии, и у вас будет очень простое модальное всплывающее окно.
Я создал код для ссылки - http://codepen.io/anon/pen/brEHI