將彈出窗口大小調整爲內容 - CSS

我正在試圖創建此座標位於屏幕右上角的浮動模式彈出窗口。我希望背景是主動的（如我可以在網頁上做的事情，通常沒有彈出打擾它。將彈出窗口大小調整爲內容 - CSS

的問題出現時，我想的模式調整對裏面的內容。因此，舉例來說，如果我在這個彈出框中寫了一個段落，它會自動調整模態以包含那個文本，最好我希望寬度是恆定的，但是我希望它根據文本向下延伸。遠：

// Get the modal 
 
    var modal = document.getElementById('myModal'); 
 

 
    // Get the button that opens the modal 
 
    var btn = document.getElementById("myBtn"); 
 

 
    // Get the <span> element that closes the modal 
 
    var span = document.getElementsByClassName("close")[0]; 
 

 
    // When the user clicks the button, open the modal 
 
    btn.onclick = function() { 
 
     modal.style.display = "inline-block"; 
 
    } 
 

 
    // When the user clicks on <span> (x), close the modal 
 
    span.onclick = function() { 
 
     modal.style.display = "none"; 
 
    }

  /* The Modal (background) */ 
 
      .modal { 
 
       display: none; /* Hidden by default */ 
 
       position: fixed; /* Stay in place */ 
 
       z-index: 1; /* Sit on top */ 
 
       right: 0; 
 
       top: 0; 
 
       width: 50%; /* Full width */ 
 
       height: 50px; /* Full height */ 
 
       overflow: auto; /* Enable scroll if needed */ 
 
       background-color: rgb(0,0,0); /* Fallback color */ 
 
       background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
 
      } 
 

 
      /* Modal Content */ 
 
      .modal-content { 
 
       background-color: orange; 
 
       position: absolute; 
 
       right: 0px; 
 
       border: 1px solid #888; 
 
       width: 100%; 
 
       height: 100%; 
 
       margin: auto; 
 
      } 
 

 
      /* The Close Button */ 
 
      .close { 
 
       color: #aaaaaa; 
 
       float: right; 
 
       font-size: 28px; 
 
       font-weight: bold; 
 
      } 
 

 
       .close:hover, 
 
       .close:focus { 
 
        color: #000; 
 
        text-decoration: none; 
 
        cursor: pointer; 
 
       }

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 

 
    </head> 
 
    <body> 
 

 
     <h2>Modal Example</h2> 
 

 
     <!-- Trigger/Open The Modal --> 
 
     <button id="myBtn">Open Modal</button> 
 

 
     <!-- The Modal --> 
 
     <div id="myModal" class="modal"> 
 

 
      <!-- Modal content --> 
 
      <div class="modal-content"> 
 
       <span class="close">&times;</span> 
 
       <p>Some text in the Modal..</p> 
 
      </div> 
 

 
     </div> 
 
    </body> 
 
    </html>

所以當「模態內容」div由於文本的大小增加，我希望父div（myModal）相應地調整其大小。我無法弄清楚如何做到這一點。有任何想法嗎？

謝謝！

來源

2017-07-27 TheBlindDeveloper

我刪除了overflow:auto所以當有一個長文本滾動條將不會出現。模態自動擴展並具有100像素的最小高度。

var modal = document.getElementById('myModal'); 
 

 
// Get the button that opens the modal 
 
var btn = document.getElementById("myBtn"); 
 

 
// Get the <span> element that closes the modal 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
// When the user clicks the button, open the modal 
 
btn.onclick = function() { 
 
    modal.style.display = "inline-block"; 
 
} 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
}

/* The Modal (background) */ 
 

 
.modal { 
 
    display: none; 
 
    /* Hidden by default */ 
 
    position: fixed; 
 
    /* Stay in place */ 
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    right: 0; 
 
    top: 0; 
 
    width: 30%; 
 
    /* Full width */ 
 
    height: auto; 
 
    min-height: 100px; 
 
    /* Full height */ 
 
    background-color: orange; 
 
    border: 1px solid #888; 
 
} 
 

 
.modal-content { 
 
} 
 

 

 
/* The Close Button */ 
 

 
.close { 
 
    color: #aaaaaa; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: #000; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<h2>Modal Example</h2> 
 

 
<!-- Trigger/Open The Modal --> 
 
<button id="myBtn">Open Modal</button> 
 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 

 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <span class="close">&times;</span> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus nunc, rhoncus in pellentesque vitae, bibendum vitae nunc. Morbi a arcu blandit, maximus tortor rhoncus, commodo libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus egestas odio mauris, eu imperdiet ligula lobortis malesuada. Cras sit amet laoreet odio. Vivamus feugiat tortor a ullamcorper pulvinar. Mauris vestibulum semper ex nec pretium. Curabitur in elementum leo, et mollis dui. Integer convallis scelerisque metus, vel pulvinar metus sollicitudin eu. Nunc eu tristique odio.</p> 
 
    </div> 
 

 
</div>

來源

2017-07-27 05:55:02 Gerard

刪除位置從模式的內容絕對和添加一些填充

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title> Modal Content </title> 
 
    <style> 
 
     /* The Modal (background) */ 
 
     .modal { 
 
      display: none; /* Hidden by default */ 
 
      position: fixed; /* Stay in place */ 
 
      z-index: 1; /* Sit on top */ 
 
      right: 0; 
 
      top: 0; 
 
      width: 50%; /* Full width */ 
 
      height: auto; /* Full height */ 
 
      overflow: auto; /* Enable scroll if needed */ 
 
      background-color: rgb(0,0,0); /* Fallback color */ 
 
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
 

 
     } 
 

 
     /* Modal Content */ 
 
     .modal-content { 
 
      background-color: orange; 
 
      border: 1px solid #888; 
 
      margin: auto; 
 
      padding:20px; 
 
     } 
 

 
     /* The Close Button */ 
 
     .close { 
 
      color: #aaaaaa; 
 
      float: right; 
 
      font-size: 28px; 
 
      font-weight: bold; 
 
     } 
 

 
      .close:hover, 
 
      .close:focus { 
 
       color: #000; 
 
       text-decoration: none; 
 
       cursor: pointer; 
 
      } 
 
    </style> 
 
</head> 
 
<body> 
 

 
    <h2>Modal Example</h2> 
 

 
    <!-- Trigger/Open The Modal --> 
 
    <button id="myBtn">Open Modal</button> 
 

 
    <!-- The Modal --> 
 
    <div id="myModal" class="modal"> 
 

 
     <!-- Modal content --> 
 
     <div class="modal-content"> 
 
      <span class="close">&times;</span> 
 
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 
     </div> 
 

 
    </div> 
 

 

 

 
    <script> 
 
// Get the modal 
 
var modal = document.getElementById('myModal'); 
 

 
// Get the button that opens the modal 
 
var btn = document.getElementById("myBtn"); 
 

 
// Get the <span> element that closes the modal 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
// When the user clicks the button, open the modal 
 
btn.onclick = function() { 
 
    modal.style.display = "inline-block"; 
 
} 
 

 
// When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 
    </script> 
 
</body> 
 
</html>

來源

2017-07-27 05:53:49 codegeek

將彈出窗口大小調整爲內容 - CSS

回答

相關問題