我的引导窗体模式窗体无法正常显示

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

我用的是并没有完全得到它在另外一个，虽然莫代尔仍然出现。奇怪的，但它的工作。谢谢你们的反馈！