Ich versuche, dieses schwebende modale Popup zu erstellen, das in der oberen rechten Ecke des Bildschirms sitzt. Ich möchte, dass der Hintergrund aktiv ist (wie ich kann Dinge normalerweise auf der Webseite tun, ohne das Popup stört es.Popup-Größe auf Inhalt anpassen - CSS
Das Problem entsteht, wenn ich das modale auf den Inhalt auf der Innenseite ändern möchte. Also zum Beispiel, wenn Ich würde einen Absatz innerhalb dieses Popup schreiben, es würde automatisch die Größe des Modales ändern, um diesen Text zu enthalten. Vorzugsweise möchte ich die Breite konstant sein, aber ich möchte, dass sie sich je nach Text nach unten erstreckt weit:
// 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">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>Wenn also das Dival "modal-content" aufgrund von Text größer wird, möchte ich, dass das Eltern-Div (myModal) seine Größe entsprechend anpasst. Ich kann nicht herausfinden, wie das geht. Irgendwelche Ideen?
Danke!