Bootstrap模式关闭按钮问题

Question

我正在开启模态时启动模态，它有两个按钮一个用于打印模态内容，第二个用于关闭模态。

在aspx页面的模式代码：

<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">PD checks details</h4> 
     </div> 
     <div id="printArea" class="modal-body"> 
      <asp:Repeater ID="rptPDC" runat="server"> 
       <HeaderTemplate> 
        <table class="table table-bordered table-condensed table-hover table-responsive table-striped"> 
         <tr> 
          <th>IDVC</th> 
          <th>Check Number</th> 
          <th>Check Date</th> 
          <th>AMTRMITHC</th> 
         </tr> 
       </HeaderTemplate> 
       <ItemTemplate> 
        <tr> 
         <td><%#Eval("idvc") %> </td> 
         <td><%#Eval("checkNo") %> </td> 
         <td><%#Eval("checkDa") %> </td> 
         <td><%#Eval("art") %> </td> 
        </tr> 


       </ItemTemplate> 
       <FooterTemplate> 

        </table> 
       </FooterTemplate> 

      </asp:Repeater> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" onclick="PrintElem('printArea')">Print</button> 
<button type="button" id="closemodal" class="btn btn-default" data-dismiss="modal">Close</button> 

     </div> 
     </div> 
    </div> 
    </div> 

的问题是，当用户点击打印按钮每一件事情是确定的和模态内容将被打印出来，但是当关闭按钮，用户点击关闭模式打印完内容后什么都没有发生，模式没有关闭？

我试着用下面的JavaScript代码来隐藏模态：

$("#closemodal").click(function() { 
      $("#myModal").modal("hide"); 
     }); 

也没什么同样的问题依然？

Answer 1

你不需要绑定事件显式关闭。它本身内置于引导程序中。仔细看看示例代码在http://getbootstrap.com/javascript/#modals

Answer 2

它与你的代码工作

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
      Launch demo modal 
     </button> 

<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">PD checks details</h4> 
     </div> 
     <div id="printArea" class="modal-body"> 
      <asp:Repeater ID="rptPDC" runat="server"> 
       <HeaderTemplate> 
        <table class="table table-bordered table-condensed table-hover table-responsive table-striped"> 
         <tr> 
          <th>IDVC</th> 
          <th>Check Number</th> 
          <th>Check Date</th> 
          <th>AMTRMITHC</th> 
         </tr> 
       </HeaderTemplate> 
       <ItemTemplate> 
        <tr> 
         <td><%#Eval("idvc") %> </td> 
         <td><%#Eval("checkNo") %> </td> 
         <td><%#Eval("checkDa") %> </td> 
         <td><%#Eval("art") %> </td> 
        </tr> 


       </ItemTemplate> 
       <FooterTemplate> 

        </table> 
       </FooterTemplate> 

      </asp:Repeater> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" onclick="PrintElem('printArea')">Print</button> 
<button type="button" id="closemodal" class="btn btn-default" data-dismiss="modal">Close</button> 

     </div> 
     </div> 

https://jsfiddle.net/m1tL84gw/

Answer 3

引导找到与属性数据驳回=“莫代尔”和触发点击它，元素关闭模式对话框

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 

Answer 4

尝试获取console.log（'test'）当哟你打开模式关闭按钮，如果你得到它，那么你可以触发模式关闭按钮。例如：$("#closemodal").click(function() { console.log('MOdal CLose Layer'); setTimeout(function(){$("#myModal").modal("hide");},1000); });

Answer 5

你甚至可以检查这个Demohttp://jsfiddle.net/h3WDq/。模态的关闭由bootstrap处理。或者再仔细检查一下你的PrintElem（'printArea'）函数的代码。函数内部的某些东西可能会打破模态的紧密功能。

更新：使用下面的脚本进行打印，也将努力：

<script> 
    function PrintElem(elem) { 
    var toPrint; 
    toPrint=window.open(); 
    toPrint.document.write(document.getElementById(elem).innerHTML); 
    toPrint.print(); 
    toPrint.close(); 
    } 
</script>