我的引導窗體模式窗體無法正常顯示

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); 

我用的是並沒有完全得到它在另外一個，雖然莫代爾仍然出現。奇怪的，但它的工作。謝謝你們的反饋！