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

bootstrap 找到具有 data-dismiss="modal" 属性的元素并触发点击它以关闭模态对话框

<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

您甚至可以查看 Demo http://jsfiddle.net/h3WDq/ 。模式的关闭由引导程序本身处理。或者只是仔细检查您的 PrintElem('printArea') 函数代码。可能是函数内部的某些东西破坏了 modal 的关闭功能。

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

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