首页写一个用js 在一个页面中嵌入一个弹窗的代码

写一个用js 在一个页面中嵌入一个弹窗的代码

时间: 2024-03-09 21:44:17 浏览: 58

好的，以下是一个简单的用 JavaScript 嵌入弹窗的代码： ```html <!DOCTYPE html> <html> <head> <title>弹窗示例</title> </head> <body> <button onclick="openPopup()">打开弹窗</button> <script> function openPopup() { // 创建一个 div 元素作为弹窗 var popup = document.createElement('div'); popup.style.position = 'fixed'; popup.style.top = '50%'; popup.style.left = '50%'; popup.style.transform = 'translate(-50%, -50%)'; popup.style.width = '300px'; popup.style.height = '200px'; popup.style.backgroundColor = '#fff'; popup.style.border = '1px solid #000'; popup.style.padding = '20px'; popup.innerHTML = '<h2>弹窗标题</h2><p>弹窗内容</p><button onclick="closePopup()">关闭</button>'; // 将弹窗添加到页面中 document.body.appendChild(popup); } function closePopup() { // 找到弹窗元素并从页面中移除 var popup = document.querySelector('div'); document.body.removeChild(popup); } </script> </body> </html> ``` 在这个示例中，我们创建了一个 `openPopup` 函数，它会在点击页面上的按钮时创建一个 div 元素作为弹窗，并将其添加到页面中。弹窗的内容可以通过设置 div 元素的 `innerHTML` 属性来实现。我们还创建了一个 `closePopup` 函数，它会在弹窗中点击 “关闭” 按钮时将弹窗从页面中移除。要实现这一点，我们使用了 `document.querySelector` 方法来找到页面中的 div 元素，并使用 `document.body.removeChild` 方法将其从页面中移除。以上代码只是一个简单的示例，你可以根据自己的需求对代码进行修改和扩展。

阅读全文