将弹出窗口大小调整为内容 - 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

回答

相关问题