Home / Questions / 149656
Accepted
Sebastián Lagos Yañez
Asked: 2020-03-23 12:23:39 +0800 CST 2020-03-23 12:23:39 +0800 CST

如何使模态响应，用于数据表？

  • 772

原来我有一个显示表格的模态，但是表格dataTable是向右传递的，并没有保留在模态内部。这是我所做的一个示例。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

 <div class="modal fade" id="compromisos" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Compromisos</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table id="compromiso_ejecutivo" class="display nowrap">
                        <thead>
                          <tr>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                          </tr>
                        </thead>
                        <tbody>
                        
                        </tbody>
                    </table>
                </div>
                <script type="text/javascript">
                    $(document).ready(function () {
                        $('#compromisos > .modal-body').css({width:'auto',height:'auto', 'max-height':'100%'});
                        $("#compromiso_ejecutivo").dataTable();
                    });
                </script>
            </div>
        </div>
    </div>
    
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#compromisos">
 Mostrar
</button>

这就是我试图做的，但我不知道如何使内容响应，即使使用lg模态类也不能很好地工作，除了列可能会在以后有所不同。

注意：我使用 bootstap 4 和 jquery。

jquery

2 Answers

  1. Best Answer

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

 <div class="modal fade" id="compromisos" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Compromisos</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table id="compromiso_ejecutivo" class="display nowrap table-responsive">
                        <thead>
                          <tr>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                          </tr>
                        </thead>
                        <tbody>
                        
                        </tbody>
                    </table>
                </div>
                <script type="text/javascript">
                    $(document).ready(function () {
                        $('#compromisos > .modal-body').css({width:'auto',height:'auto', 'max-height':'100%'});
                        $("#compromiso_ejecutivo").dataTable();
                    });
                </script>
            </div>
        </div>
    </div>
    
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#compromisos">
 Mostrar
</button>

    把bootstrap的table-responsive类放在上面

    <table id="compromiso_ejecutivo" class="display nowrap table-responsive">

    所以表格将适应模态的大小

    • 1

  2. 问题是您正在将此样式应用于模态：

    @media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
}

    它限制你的宽度为 500 像素。

    你有更大尺寸的 modal-lg 类：

    @media (min-width: 992px) {
  .modal-lg {
    max-width: 800px;
  }
}

    而且由于在这种情况下还不够，最好的办法是覆盖它：

    .modal-lg {
    max-width: 80% !important;
}

    节目

    您还可以选择在事件中将宽度修改为所需的值show：

     $('#compromisos').on('show.bs.modal', function () {
   $(this).find('.modal-dialog').css({
   'max-width':'80%'
   });
 });

    节目

    • 1