用html写浮窗 点击按钮渲染页面 可设置其他页面连接
时间: 2023-12-17 07:02:53 浏览: 30
您好!感谢您的提问。要用 HTML 写浮窗,可以使用以下代码作为参考:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮窗示例</title>
<style>
.float-window {
position: fixed;
bottom: 20px;
right: 20px;
width: 200px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px #ccc;
}
.float-window button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #5cb85c;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="float-window">
<button onclick="renderPage('http://www.example.com')">渲染页面</button>
</div>
<script>
function renderPage(url) {
window.open(url);
}
</script>
</body>
</html>
```
在上面的代码中,我们创建了一个 `div` 元素,并为其设置了 `position: fixed;`、`bottom: 20px;`、`right: 20px;` 等样式,使其成为一个浮动窗口。然后在其中添加了一个按钮,并为其设置了 `onclick` 事件,当点击该按钮时,会调用 `renderPage` 函数,该函数会打开一个新的窗口,访问指定的 URL 地址。
您可以将 `http://www.example.com` 替换为您需要打开的页面地址,这样就可以实现浮窗中的按钮点击后打开指定页面的功能。同时,您还可以添加其他按钮,实现其他功能。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)