My Bootstrap form модальная форма не отображается должным образом

Question

Я пытаюсь добавить модальную форму редактирования на страницу с помощью 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">&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">&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> 

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

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

Answer 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">&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>

Answer 2

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

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

}

и это называется на стороне сервера с этим:

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

другой один я использовал не совсем получить это право, хотя модальный все же появился. Странно, но это сработало. Спасибо за отзывы ребята!