There is this script that someone made that you can click a button and it will open a little popup window and an emoji keyboard will show. Then you can click away and it'll close. How can I make something like that, but instead of an emoji keyboard showing up, it's a .html page
Example index.html
<!DOCTYPE html>
<html>
<head>
<title>Emoji Test</title>
<script src="emoji-button.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var picker = new EmojiButton();
var button = document.querySelector('#emoji-button');
button.addEventListener('click', function() {
picker.showPicker(button);
});
});
</script>
</head>
<body>
<h1>Emoji Button</h1>
<button id="emoji-button">๐</button>
</body>
</html>Download link - emoji-button.min.js:
https://github.com/joeattardi/emoji-button/releases/download/v2.4.0/emoji-button.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>popup</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">😜</button>
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Large Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Add the <code>.modal-lg</code> class on <code>.modal-dialog</code> to create this large modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>popup</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">😜</button>
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Large Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Add the <code>.modal-lg</code> class on <code>.modal-dialog</code> to create this large modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
</body>
</html>