Display good-looking popup

Code Help HTML/CSS/JS
1

Im trying to make something that gets the source code of text in a div class. How would I display the result (.content) with a good looking pop up instead of a alert. Thanks - Vek

<div class="content">
   <h1>inner html</h1>
</div>

<button onclick="openPopup()">Open Popup</button>

<script>
function openPopup() {
    let content = document.querySelector('.content').innerHTML;
    alert(content);
}
</script>
2

Change the .innerText of another element to the content

3

what do you mean. Im trying to get rid of the alert function

4

Sorry for it being a bit messy:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>replit</title>
</head>

<body>
	<style>
		.popup {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0px;
			left: 0px;
			background-color: rgba(0, 0, 0, .2);
			display: none;
		}

		.popup-inner {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: white;
		}
	</style>
	<div id="content">
		<h1>Inner HTML</h1>
	</div>

	<div class="popup" id="popup1">
		<div class='popup-inner'>
			<code id="popup1-content"></code>
			
			<button onclick="hidePopup()">Hide Popup</button>
		</div>
	</div>

	<button onclick="openPopup()">Open Popup</button>

	<script>
		function openPopup() {
			// get content
			content = document.getElementById("content").innerHTML;

			// add the content to the popup
			document.getElementById("popup1-content").innerHTML = content;

			// the the popup display to block
			document.getElementById("popup1").style.display = "block";
		}

		function hidePopup() {
			document.getElementById("popup1").style.display = "none";
		}
	</script>
</body>

</html>
1 Like
5

except you want to change innerText and not innerHTML to display the source code

1 Like