Question

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

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

您无需将事件绑定到显式关闭。它内置于bootstrap中。请在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

bootstrap找到属性为 data-dismiss =“modal”的元素并触发单击它以关闭模态对话框

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

Answer 4

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

Answer 5

您甚至可以查看Demo http://jsfiddle.net/h3WDq/。关闭模态由bootstrap本身处理。或者只是仔细检查PrintElem（＆＃39; printArea＆＃39;）功能的代码。函数内部的某些东西可能会破坏模态的近似功能。

更新：使用以下脚本进行打印，它将起作用：

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

Bootstrap Modal关闭按钮问题

5 个答案: