xiong_yi_ming 2019-06-13 10:25 采纳率: 0%
浏览 10781

html怎么设置按钮，能点击弹出一个div或者表单

设置一个按钮，点击弹出表单
就像一般网页点击右上角头像就能弹出一个登录窗口那样

  • 写回答

5条回答 默认 最新

  • 摄影陳 2019-06-13 11:01
    关注

    先写好弹窗（div）的html和css，默认隐藏（display: none;），然后用JS控制 ，点击按钮即显示div，然后点击确定/取消再隐藏div
    随便写了一个你来参考

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
function show(){
    var show_part = document.querySelector('.part');
    show_part.style.display = 'block';
    }
function hide(){
    var show_part = document.querySelector('.part');
    show_part.style.display = 'none';
    }

</script>
<style>
.whole{
    background-color:blue;
    height:500px;
    width:500px;
    }

.part{
    display:none;
    background-color:red;
    height:200px;
    width:200px;
    position:relative;
    margin:20%;
    }   
</style>
</head>



<body>


<div class="whole">
<button onClick="show()">点我弹出</button>

<div class="part">
这里是弹窗
<button onClick="hide()">点我隐藏</button>
<div>
</div>
</body>
</html>
    评论

报告相同问题？

悬赏问题

  • ¥15 安装svn网络有问题怎么办
  • ¥15 Python爬取指定微博话题下的内容，保存为txt
  • ¥15 vue2登录调用后端接口如何实现
  • ¥65 永磁型步进电机PID算法
  • ¥15 sqlite 附加（attach database）加密数据库时，返回26是什么原因呢？
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能？(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗？
  • ¥15 latex怎么处理论文引理引用参考文献