调整弹出内容的大小 - CSS答案

【问题标题】：Resize Popup to Content - CSS调整弹出内容的大小 - CSS
【发布时间】：2017-07-27 05:41:35
【问题描述】：

我正在尝试创建位于屏幕右上角的浮动模式弹出窗口。我希望背景处于活动状态（因为我可以在网页上正常执行操作而不会出现弹出窗口。

当我想将模态框调整为内部内容时，就会出现问题。因此，例如，如果我要在该弹出窗口中编写一个段落，它会自动调整模态框的大小以包含该文本。最好我希望宽度保持不变，但我希望它根据文本向下延伸。

这是我目前所拥有的：

    // 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>

因此，当“modal-content”div 因文本而增大时，我希望父 div (myModal) 相应地调整其大小。我不知道该怎么做。有什么想法吗？

谢谢！

【问题讨论】：

标签： javascript html css popup

【解决方案1】：

我删除了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>

【讨论】：

【解决方案2】：

从模态内容中移除绝对位置并添加一些填充

<!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>

【讨论】：