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

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>
    评论

报告相同问题？

  • 基于layui点击按钮弹出包含表单的窗口
    2022-03-16 14:06
    本篇文章将详细介绍如何利用layui实现“基于layui点击按钮弹出包含表单的窗口”的功能。 首先，我们需要理解layui的模块化概念。layui的每个功能都被封装为一个模块，例如`form`模块用于处理表单操作，`layer`模块...
  • 使用layui前端框架弹出form表单以及提交的示例
    2020-10-16 03:09
    在页面中添加一个“添加”按钮，当用户点击这个按钮时，将触发一个函数，用于弹出form表单。在这个例子中，`func7`函数用于打开一个新的页面层，展示添加用户的信息表单。 ```html <div class="layui-form"> ();" ...
  • 左侧隐藏div，点击按钮弹出
    2013-04-22 19:52
    标题中的“左侧隐藏div，点击按钮弹出”是一种常见的网页交互设计，主要涉及到HTML、CSS以及JavaScript技术。这种设计常用于创建例如侧边栏、菜单或者提示框等元素，通过初始隐藏的方式节省页面空间，当用户触发特定...
  • html-alert-div.rar_alert弹出div
    2022-09-19 19:46
    为了解决这个问题，开发者通常会选择创建自定义的弹出层，这就是"alert弹出div"的由来。 压缩包中的三个文件——"弹出层1.html"、"弹出层2.html"和"弹出层3.html"，展示了三种不同的弹出层实现方法。这些方法通常...
  • JS+CSS实现带关闭按钮DIV弹出窗口的方法
    2020-10-24 16:23
    JS和CSS实现带有关闭按钮的DIV弹出窗口的方法是一种常见的前端开发技术。本文详细介绍了利用JavaScript和CSS来创建一个可以显示和隐藏的弹出层，其中包含了关闭按钮。这种方法广泛应用于网站中，用于显示提示信息、...
  • js实现点击按钮弹出上传文件的窗口
    2020-10-20 19:33
    本文将深入探讨如何使用JavaScript实现点击按钮弹出上传文件的窗口。 首先，我们要了解HTML中的`<input>`标签，它用于创建各种输入控件。在文件上传的场景中，我们可以使用`<input type="file">`来创建一个文件选择...
  • bootstrap实现点击删除按钮弹出确认框的实例代码
    2020-10-18 05:11
    Bootstrap提供了一个模态对话框组件（Modal），可以用来实现点击按钮后弹出确认框的效果。 在本文中，作者提供了一个使用Bootstrap框架实现点击删除按钮后弹出确认框的具体实例代码。下面将对这个实例代码中涉及的...
  • jQuery实现弹出窗口弹出div层的实例代码
    2020-10-20 16:25
    通过上述步骤，即可实现点击链接弹出div层，并使页面其他部分变灰以及点击关闭后恢复原状的功能。这样的实现方式在实际开发中非常常见，常用于创建模态对话框、表单提交确认、详细信息预览等多种场景。掌握这些知识...
  • jQuery+CSS3点击图标按钮动画弹出表单特效.zip
    2023-09-22 00:22
    总结来说，“jQuery+CSS3点击图标按钮动画弹出表单特效”是一个结合了前端两大技术的实用示例，它展示了如何利用jQuery的事件处理和CSS3的动画功能，为网页增加互动性。通过理解并实践这个特效，开发者可以提升自己...
  • jQuery弹出遮罩层步骤流程表单代码
    2020-06-10 08:42
    在HTML中，通常会有一个按钮或链接触发弹出遮罩层，以及一个隐藏的div元素用于承载步骤流程表单。这个div元素通常设置为display:none，以便在需要时通过JavaScript显示。HTML还应包含必要的表单元素，如输入框、复选...
  • 没有解决我的问题, 去提问