Блог

Главная - Вопросы по программированию - Моя загрузочная форма модальная форма не отображается должным образом

Моя загрузочная форма модальная форма не отображается должным образом

#asp.net #html #twitter-bootstrap-3 #webforms #bootstrap-modal

#asp.net #HTML #twitter-bootstrap-3 #веб-формы #bootstrap-modal

Вопрос:

Я пытаюсь добавить модальную форму редактирования на страницу с помощью Bootstrap. Идея заключается в том, что когда пользователь выбирает элемент из сетки, должна появиться форма редактирования, показывающая текущие значения и позволяющая им вносить изменения. Вот код для модальной формы:

         <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="form-horizontal" id="myForm" role="form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">amp;times;</button>
                        <h4 class="modal-title">My modal</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group has-feedback">
                            <div class="col-lg-12">
                                <label class="control-label col-sm-3" for="tbTitle">Public Title:</label>
                                <div class="input-group col-sm-5">
                                    <input type="text" runat="server" class="form-control required" id="tbTitle">
                                </div>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <div class="col-lg-12">
                                <label class="control-label col-sm-3" for="tbInternalTitle">Internal Title:</label>
                                <div class="input-group col-sm-5">
                                    <input type="text" runat="server" class="form-control required" id="tbInternalTitle">
                                </div>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <div class="col-lg-12">
                                <label class="control-label col-sm-3" for="tbPrice">Monthly Price:</label>
                                <div class="input-group col-sm-5">
                                    <input type="text" runat="server" class="form-control required" id="tbPrice">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

Теперь дело в том, что когда я нажимаю кнопку «Редактировать» в строке элемента управления GridView на странице, он делает то, что должен — извлекает данные плана и заполняет поля формы. Я знаю это, потому что, если я проверю источник страницы после нажатия на элемент, вот что я вижу в HTML:

     <div class="container-fluid page-top">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="form-horizontal" id="myForm" role="form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">amp;times;</button>
                        <h4 class="modal-title">My modal</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group has-feedback">
                            <div class="col-lg-12">
                                <label class="control-label col-sm-3" for="tbTitle">Public Title:</label>
                                <div class="input-group col-sm-5">
                                    <input name="ctl00$cpMain$tbTitle" type="text" id="cpMain_tbTitle" class="form-control required" value="Basic Gold Program" />
                                </div>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <div class="col-lg-12">
                                <label class="control-label col-sm-3" for="tbInternalTitle">Internal Title:</label>
                                <div class="input-group col-sm-5">
                                    <input name="ctl00$cpMain$tbInternalTitle" type="text" id="cpMain_tbInternalTitle" class="form-control required" value="BASEPLAN" />
                                </div>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <div class="col-lg-12">
                                <label class="control-label col-sm-3" for="tbPrice">Monthly Price:</label>
                                <div class="input-group col-sm-5">
                                    <input name="ctl00$cpMain$tbPrice" type="text" id="cpMain_tbPrice" class="form-control required" value="$75.00" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

Однако при обычном просмотре страницы и нажатии кнопки «Редактировать» для строки, вот скриншот того, что на самом деле появляется:

введите описание изображения здесь

Я не знаю, почему сами данные формы не отображаются, но это сводит меня с ума! Кажется, у меня нет никаких ошибок HTML (незакрытые теги и т.д.), Поэтому я не могу отследить, что здесь происходит. Какая-нибудь помощь?

Ответ №1:

Я поместил ваш код в фрагмент кода, и он работает … странно.
Если вы видите правильный HTML в консоли браузера, возможно, это проблема css.
Вы должны попытаться установить height свойство, чтобы быть уверенным…

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid page-top">

  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="form-horizontal" id="myForm" role="form">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">amp;times;</button>
            <h4 class="modal-title">My modal</h4>
          </div>
          <div class="modal-body">
            <div class="form-group has-feedback">
              <div class="col-lg-12">
                <label class="control-label col-sm-3" for="tbTitle">Public Title:</label>
                <div class="input-group col-sm-5">
                  <input name="ctl00$cpMain$tbTitle" type="text" id="cpMain_tbTitle" class="form-control required" value="Basic Gold Program" />
                </div>
              </div>
            </div>
            <div class="form-group has-feedback">
              <div class="col-lg-12">
                <label class="control-label col-sm-3" for="tbInternalTitle">Internal Title:</label>
                <div class="input-group col-sm-5">
                  <input name="ctl00$cpMain$tbInternalTitle" type="text" id="cpMain_tbInternalTitle" class="form-control required" value="BASEPLAN" />
                </div>
              </div>
            </div>
            <div class="form-group has-feedback">
              <div class="col-lg-12">
                <label class="control-label col-sm-3" for="tbPrice">Monthly Price:</label>
                <div class="input-group col-sm-5">
                  <input name="ctl00$cpMain$tbPrice" type="text" id="cpMain_tbPrice" class="form-control required" value="$75.00" />
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

Комментарии:

1. Где добавить высоту?

2. Проверьте DOM с помощью консоли вашего браузера, чтобы выяснить, нет ли у модальной формы проблем с css. Пример: отображение отсутствует, видимость скрыта или что-то, что может нарушить рендеринг.

3. Вот в чем дело. При нажатии кнопки «Редактировать» я использую вызов ScriptManager со стороны сервера для вызова функции Javascript, которая открывает модальную. Интересно, в этом ли проблема? Я подключил ваш код к странице, и он тоже работает. Это когда я вызываю его из кода, он не работает. Есть какие-нибудь примеры того, как открыть модальный файл со стороны сервера?

4. Вы не должны пытаться открыть модальную форму с сервера. Попробуйте использовать обратный вызов, выполняемый передней частью.

Ответ №2:

Ну, проблема заключалась в том, как я вызывал модальную форму для открытия. Мне пришлось использовать другую функцию JavaScript для ее вызова, поскольку другая работала, но каким-то образом глючила. Функция Javascript:

 function openModal() {
$('#myModal').modal('show');

}

и она вызывается со стороны сервера с помощью этого:

 ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);

Другая, которую я использовал, не совсем правильно поняла, хотя модальная форма все еще появлялась. Странно, но это сработало. Спасибо за обратную связь, ребята!

Метки: