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>