具有固定頁眉和頁腳以及可滾動內容的模態對話框

Question

我正在嘗試創建一個具有固定頁眉和頁腳的模態對話框，並且模態對話框中的內容（在本例中為用戶列表）是可滾動的...

到目前為止，我的最佳嘗試給了我圖像上的結果：

我假設在看到圖像后，我不必描述問題是什么......而且我還假設你會知道解決方案的樣子...... :)

但是為了確保我無論如何都會寫它......模態對話框需要有一個固定的標題（標題“編輯板”“板名稱”和“板類型”所在的區域）和頁腳（區域“保存”按鈕位於）必須固定/不可滾動......唯一必須滾動的是用戶列表......

代碼：

網址：

<div id="addBoardModal" class="modal modal-fixed-footer">
    <form class="Boards_new" autocomplete="off">
      <div class="modal-header">
        <h5>{{title}}</h5>
        <div class="input-field">
           <!--INPUT FORM-->
        <div class="BoadType">
           <!--RADIAL BUTTON THING--> 
      <div class="modal-content">
            <div class="shareMembers" style="margin-top:18px;">
                <div class="row">
                    <h5 class="left">Share</h5>
                      <!--LIST OF USERS !!!THIS HAS TO BE SCROLLABLE!!!-->
                </div>
            </div>
      <div class="modal-footer">
        <!--JSUT THIS SAVE BUTTON-->
      </div>

CSS：

.modal {
  @extend .z-depth-4;
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  background-color: #fafafa;
  padding: 0;
  max-height: 70%;
  width: 55%;
  margin: auto;
  //overflow-y: auto;
  border-radius: 2px;
  will-change: top, opacity;

     @media #{$medium-and-down} {
       width: 80%; }

  h1,h2,h3,h4 {
    margin-top: 0; }

.modal-header{
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
  width: 100%; 
  height: 15rem; 
  padding:24px;
}

.modal-header > .input-field{width:100%;}

.modal-content {
  padding: 24px;
  position: absolute; 
  width: 100%; 
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch;
}

.modal-close {cursor: pointer;}

.modal-footer {
  border-radius: 0 0 2px 2px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fafafa;
  padding: 4px 6px;
  height: 56px;
  width: 100%;

.btn, .btn-flat {
  float: right;
  margin: 6px 0;
}
}
}

因此，如果有人能告訴我我在代碼中做錯了什么，或者我是否應該做一些不同的事情那會很好......

我用這些例子來編碼這個......示例1和示例2

注意：我正在使用 Materialise 框架

Answer 1

您可以使用calc()函數嘗試max-height ，例如：

.modal-content {
  height: auto !important;
  max-height: calc(100vh - 340px) !important;
}

看看下面的片段（使用全屏）：

 $(document).ready(function(){ // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered $('.modal-trigger').leanModal(); });

 .modal { overflow: hidden; } .modal-header { padding: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .modal-header h4 { margin: 0; } .modal-content { height: auto !important; max-height: calc(100vh - 340px) !important; } .content-row { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #ddd; } .content-row:last-child { border-bottom: none; } .icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #33b5e5; color: #fff; } .name { padding: 0 10px; } .role { padding: 0 10px; flex: 1; text-align: right; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.css" rel="stylesheet"/> <!-- Modal Trigger --> <a class="modal-trigger waves-effect waves-light btn" href="#modal1">Modal</a> <!-- Modal Structure --> <div id="modal1" class="modal modal-fixed-footer"> <div class="modal-header"> <h4>Modal Header</h4> </div> <div class="modal-content"> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> </div> <div class="modal-footer"> <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

希望這可以幫助！

Answer 2

試試這個，它應該可以工作：

<div id="addBoardModal" class="modal modal-fixed-footer">
    <form class="Boards_new" autocomplete="off">
      <div class="modal-header">
        <h5>{{title}}</h5>
        <div class="input-field">
           <!--INPUT FORM-->
        <div class="BoadType">
           <!--RADIAL BUTTON THING--> 
        <div class="modal-content" style="height:150px;overflow:scroll"> 
            <div class="shareMembers" style="margin-top:18px;">
                <div class="row">
                    <h5 class="left">Share</h5>
                      <!--LIST OF USERS !!!THIS HAS TO BE SCROLLABLE!!!-->
                </div>
            </div>
      <div class="modal-footer">
        <!--JUST THIS SAVE BUTTON-->
      </div>

Answer 3

你看起來像這樣？？ 如果沒有，請在 fiddler 中更新您的代碼，我會做些什么？

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body" style="height:300px;overflow:scroll"> <p>Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>

Answer 4

我還沒有使用 Materialise 的第 1 版對其進行測試，但這是我正在使用的：

.modal-header {
    padding: 14px;
    text-align: center;
    position: sticky;
}
.modal.modal-fixed-footer.with-header .modal-content {
    height: calc(88% - 56px) !important;
    padding: 23px !important;
}

只需將with-header的類添加到模態並在 '.modal-content' 上方添加一個 div，如下所示：

<div id="modal1" class="modal modal-fixed-footer with-header">

    <div class="modal-header">
      <h1>Modal Header</h1>
    </div>

    <div class="modal-content">
      <p>Scrollable content</p>
    </div>

    <div class="modal-footer" style="text-align: center">

      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
    </div>
</div>

填充覆蓋消除了更改 .modal-header 背景時出現的像素寬間隙。

Answer 5

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

這對我有用

謝謝