Write a nice button pop-up layer to implement the add bookmark form

Here's a nice button pop-up layer that you can use to implement the add bookmark form:

Here's the corresponding CSS code:

.button-wrapper { position: relative; }

.add-bookmark-btn { background-color: #007bff; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }

.add-bookmark-layer { position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); padding: 20px; display: none; }

.add-bookmark-layer label { display: block; margin-bottom: 5px; }

.add-bookmark-layer input[type="text"], .add-bookmark-layer input[type="url"] { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ccc; margin-bottom: 10px; }

.submit-bookmark-btn { background-color: #007bff; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }

And here's the corresponding JavaScript code to show/hide the pop-up layer:

const addBookmarkBtn = document.getElementById('add-bookmark-btn'); const addBookmarkLayer = document.getElementById('add-bookmark-layer');

addBookmarkBtn.addEventListener('click', () => { addBookmarkLayer.style.display = 'block'; });

document.addEventListener('click', (event) => { if (!event.target.closest('.add-bookmark-layer') && !event.target.closest('.add-bookmark-btn')) { addBookmarkLayer.style.display = 'none'; } });

This code will show the add bookmark pop-up layer when the user clicks on the "Add Bookmark" button, and will hide it when the user clicks anywhere outside of the layer. The form itself is a simple HTML form with two input fields (for the bookmark title and URL) and a submit button. You can modify the CSS to match the styling of your website.