Skip to content

Instantly share code, notes, and snippets.

@zuzannamj

zuzannamj/slide-in-panel.html

Last active July 16, 2024 15:38
Show Gist options
  • Save zuzannamj/97c95570171c2fd20e41ebf81a1290e7 to your computer and use it in GitHub Desktop.
Save zuzannamj/97c95570171c2fd20e41ebf81a1290e7 to your computer and use it in GitHub Desktop.
Download ZIP
Slide-in panel on a CloudPage
Raw
slide-in-panel.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { font-family: Arial, sans-serif; justify-content: center; align-items: center; height: 100vh; margin: 0; }
.slide-in-panel { position: fixed; left: -300px; top: 50%; transform: translateY(-50%); width: 300px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.2); transition: left 0.3s ease; padding: 20px; border-radius: 8px; border: 1px solid #888; }
.slide-in-panel.open { left: 0; }
.slide-in-panel p { margin: 0 0 20px; font-size: 16px; }
.button, .trigger { background-color: #0070d2; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; }
.button:hover, .trigger:hover { background-color: #005fb2; }
</style>
</head>
<body>
<button class="trigger">Open Panel</button>
<div class="slide-in-panel" id="slideInPanel">
<p>Do you want to proceed?</p>
<button class="button" onclick="handleResponse('yes')">Yes</button>
<button class="button" onclick="handleResponse('no')">No</button>
</div>
<script>
document.querySelector('.trigger').addEventListener('click', function() {
document.getElementById('slideInPanel').classList.toggle('open');
});
function handleResponse(response) {
alert('You selected: ' + response);
document.getElementById('slideInPanel').classList.remove('open');
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment