Как отобразить таблицу внутри модального всплывающего окна, которое является частью более крупной формы

0

У меня есть код ниже, который содержит форму, содержащую элемент 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>

Пожалуйста, извините мой грязный код.

  • 0
    Вы можете передать поля формы в модальное всплывающее окно как переменные url, или вы можете получить модальную запись обратно в основную форму. Сказав это, если все модальные есть поле для комментариев, почему бы просто не иметь это в их основной форме? Это кажется много времени и усилий для достижения досадного результата.
  • 0
    Может это поможет? webdesignerdepot.com/2012/10/...
Теги:
coldfusion

1 ответ

1
Лучший ответ

Я согласен с @Dan в том, что это может быть болью для ux-точки зрения, чтобы сделать это дополнительным модальным, но если этот результат вам нужен, вы можете окружить свою таблицу в div и добавить javascript, чтобы сделать поле "всплывающее окно". Добавьте стили CSS, чтобы создать черный прозрачный фон при нажатии, и у вас будет очень простое модальное всплывающее окно.

Я создал код для ссылки - http://codepen.io/anon/pen/brEHI

  • 0
    Спасибо, это очень полезно!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню