请问如何从手机底部弹出一个div呢?

就类似于 nativeUI.actionSheet: 弹出系统选择按钮框 的效果,但这个只能弹出选择按钮框,我是想实现弹出一个div,div里面的内容是我自己定义的。请问下大家要怎么实现呢? 给个网址自己学习也可以。
...全文
297 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
非常感谢!!
  • 打赏
  • 举报
回复
引用 1 楼 天际的海浪 的回复:
<style type="text/css"> #bottom-div { position: fixed; width: 100%; height: 200px; left: 0; bottom: 0; background-color: #999; } </style> <div id="bottom-div"></div>
谢谢,这个应该没有动画效果吧,就是从底部弹出的动画效果,没有app原生的感觉。
天际的海浪 2020-02-26
  • 打赏
  • 举报
回复
加上动画效果

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面漂亮姐姐名称 </title>
<style type="text/css">
#bottom-div {
	position: fixed;
	width: 100%;
	height: 200px;
	left: 0;
	bottom: -200px;
	background-color: #999;
	transition: bottom 300ms;
}
#bottom-div.on {
	bottom: 0px;
}
</style>
<div id="bottom-div"></div>
<script type="text/javascript">
window.onload = function () {
	document.getElementById("bottom-div").className = "on";
}
</script>
天际的海浪 2020-02-25
  • 打赏
  • 举报
回复
<style type="text/css"> #bottom-div { position: fixed; width: 100%; height: 200px; left: 0; bottom: 0; background-color: #999; } </style> <div id="bottom-div"></div>

39,085

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧