1.点击链接弹出一个可操作的div窗口代码效果图展示:


代码示例:

<!DOCTYPE>
<html> <head> <title>点击文字弹出一个DIV层窗口代码</title> <style> .black_overlay{ display: none; /* 此元素不会被显示*/position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; /* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/-moz-opacity: 0.8; opacity:.80; /* opacity 属性设置元素的不透明级别。*/filter: alpha(opacity=88);  /* 所有浏览器都支持 opacity 属性。   注释:IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)。*/} .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 55%; height: 55%; padding: 20px; border: 10px solid orange; background-color: white; z-index:1002; overflow: auto; } </style> </head> <body> <p>示例弹出层:<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p> <div id="light" class="white_content">这是一个层窗口示例程序. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</a></br><!-- 登陆部分代码 --><form action="1.html" method="post">用户名:<input type="text" name="" id="" value="" /></br>密码:<input type="password" name="" id="" value="" /></br><input type="submit" value="提交"/></form></div> <div id="fade" class="black_overlay"></div> </body>
</html>

2. 点击按钮弹出一个对话框

<html>
<head>
<script type="text/javascript">
function disp_alert()
{alert("我是一个消息框!")
}
</script>
</head>
<body><input type="button" onclick="disp_alert()" value="显示消息框" /></body>
</html>

其他弹出窗口的方式,后续再做补充

前端html网页,点击按钮或超链接 弹出 一个登陆的div窗口或者对话框相关推荐

  1. java点击按钮弹出警告_GUI求教~~~我想点击按钮确定后,弹出一个提示框输入有误!,,…...

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 靠 看错题目了 是这样才对 import java.awt.EventQueue; import javax.swing.JFrame; import j ...

  2. 点击按钮之后右侧弹出导航,再点击右侧导航隐藏回去的实现

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53408091 本文出自[我是干勾鱼的博客] 实现了一个点击按钮之后右侧弹出导航, ...

  3. ASP.NET----实现点击按钮或链接弹出登录对话框

    主要是利用遮罩的原理: <!--默认让登陆窗体不显示--><style type="text/css"> #login{ position: relativ ...

  4. unity点击下一张图片_求助,有没有大神知道点击按钮后就弹出一张图片的代码怎么写呀,网上找了很多但都不成功的...

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 using UnityEngine; using System.Collections; public class Button : MonoBehavi ...

  5. android 弹出框 list,android - 如何实现点击listpreference 后,弹出一个dialog?

    小皮2017-04-17 13:21:011楼 android.preference.ListPreference 源码如下: @Override protected void onPrepareDi ...

  6. android 仿微信demo————微信顶部操作栏加号按钮实现(弹出子菜单)

    android 仿微信demo----微信启动界面实现 android 仿微信demo----注册功能实现(移动端) android 仿微信demo----注册功能实现(服务端) android 仿微 ...

  7. vue h5网页点击按钮 -- 跳到微信小程序 wx-open-launch-weapp;onMenuShareAppMessage 分享图片不显示,且方法已废弃

    h5网页点击按钮,唤醒微信小程序是否可以做? 可以!!,就是有点限制. 通过wx-open-launch-weapp就可以实现,但是限制 微信服务号才可以使用.也就是说必须是微信环境下. 文章最下边, ...

  8. 网页中点击按钮弹出QQ聊天窗口的功能实现

    看到网站中有这样的功能:点击某个图片后,可以弹出QQ聊天框和WAP聊天框,在网上虽然能找到实现弹出QQ聊天框的代码,但是两种方式都实现的代码并不好找,后来无意间在QQ推广里看到了一段代码,复制粘贴后把 ...

  9. html 点击新建窗口,【单选题】在HTML中,若实现单击超链接时,弹出一个新的网页窗口,下列的()选项符合要求。 A. 节目 B. 节目 C. 节目 D. 节目...

    [单选题]在HTML中,若实现单击超链接时,弹出一个新的网页窗口,下列的()选项符合要求. A. 节目 B. 节目 C. 节目 D. 节目 更多相关问题 扩展不确定度为()Ω,取包含因子k=2.A.0 ...

最新文章

  1. 计算机考试批处理试题,2015计算机三级考试pc技术模拟试题及答案(八)
  2. Flex与ASP.NET通过Remoting方式进行通讯
  3. 图像处理-PCA人脸识别
  4. shell实例第21讲:定时清空文件内容,定时记录文件大小
  5. eclipse CTRL+F Find/Replace使用正则表达式
  6. 恢复联想键盘F1-F12标准模式
  7. php date 有warning,php提示PHP Warning: date(): It is not safe to rely on the......错误的解决办法...
  8. Linux添加新硬盘-挂载硬盘,设置开机自动挂载 解决/home 空间不足问题
  9. java 获取键盘输入法_Java中接收键盘输入的三种方法
  10. 读书笔记—《发现你的行为模式(钻石版)》-DiSC测试
  11. acc 蓝牙_蓝牙耳机acc什么意思
  12. 自制小型USB TO TTL串口工具
  13. Deecamp笔记——点云目标跟踪 Open3D连续可视化
  14. 语音预处理之分帧加窗
  15. ElasticSearch三种分页方式以及各优缺点(一文知道如何抉择)
  16. oracle primavera p6 破解版,P6项目管理软件下载 Primavera P6 Professional(项目管理软件) 16.1 免费安装版(附安装教程) 下载-脚本之家...
  17. MySQL面试夺命连环27问
  18. linux下调试thread 类_linux下GDB调试
  19. 网络层协议 ——— IP协议
  20. 使用Python将MQTT传感器数据记录到SQL数据库

热门文章

  1. 老大难的GC原理及调优,这下全说清楚了
  2. 典型相关分析(Canonical Correlation Analysis, CCA)
  3. 从ICML 2022看域泛化(Domain Generalization)最新进展
  4. 浏览器打开默认极速模式
  5. 全国计算机专业评估结果出炉;编程错误导致俄罗斯卫星发射失败
  6. Install SVN Error:The Feature You Are Tring to Use is on a Network Resource That is Unvaliable
  7. C++ define用法
  8. 科学计算机怎么算锥度,如何计算锥度值?比如说1:20等于多少度?请说说具体步骤!-锥度的计算公式-数学-贾儆刹同学...
  9. Pytorch 利用Facenet和Retinaface实现人脸识别
  10. chatgpt+机器人控制器融合(一)