HTML+CSS+JS自主设计弹出窗口的方法，在线编辑器

html怎么弹出一个小窗口

html弹出一个小窗口的方法可能有很多，就比如本站（笨鸟工具-璞玉天成，大器晚成）的导航栏点击之后会有一个小窗口（小页面）弹出，然后文章页面的底部有两个小图标，当鼠标悬放在上面的时候，也可以弹出一个小窗口，然后点击下方实例代码的试一试按钮，也可以弹出一个小窗口，是本站提供的HTML+css+的在线编辑器。这里介绍的一简单的方法和一种自主设计的方法，不需要很复杂的程序设计，也不需要框架，用和css就可以：

HTML+CSS+JS自主设计弹出窗口的方法，在线编辑器

自主设计html弹出小窗口的方法

这个方法需要结合html、css和三种语言，即web三件套全得用上。该方法的原理就是将本来的窗口的style中设置为none，当点击按钮之后，设置为block，并为该窗口绑定位置，实例代码如下：

这个窗口，可以说是自己设计的了，可以在这里添加其它的标签和功能


  #ck1{display:none;position:fixed;top:20%;left:20%;width:50%;height:80px;z-index:9999;background-color:skyblue;border-radius:5px;}


  function show2(){
  	document.getElementById("ck1").style.display = "block";
  }

HTML+CSS+JS自主设计弹出窗口的方法，在线编辑器

代码解析

这个自主设计的方法中，除了属性的设置之外，另一个关键点在于z-index值的设置，html元素的排列堆叠，不仅有水平方向、竖直方向，还有深度方向，就像立体的直角坐标系当中，不仅有x轴、y轴css如何做一个提交按钮，还有z轴，即z-index的设置可以修改div或html元素的z轴位置。

HTML+CSS+JS在线编辑器可以参考原文

原文地址：html怎么弹出一个小窗口css如何做一个提交按钮，自主设计方法，在线编辑器 – HTML教程

本文到此结束，希望对大家有所帮助。

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至81118366@qq.com举报，一经查实，本站将立刻删除。发布者：简知小编，转载请注明出处：https://www.jianzixun.com/80835.html