html怎么弹出一个小窗口
html弹出一个小窗口的办法可能有非常多，就例如本站（笨鸟工具-璞玉天成，大器晚成）的导航栏点击之后会有一个小窗口（小页面）弹出，而后文案页面的底部有两个小图标，当鼠标悬放在上面的时候，亦能够弹出一个小窗口，而后点击下方实例代码的试一试按钮，亦能够弹出一个小窗口，是本站供给的HTML+css+javascript的在线编辑器。这儿介绍的一简单的办法和一种自主设计的办法，不必须很繁杂的程序设计，亦不必须框架，用javascript和css就能够：
自主设计html弹出小窗口的办法
这个办法必须结合html、css和javascript三种语言，即web三件套全得用上。该办法的原理便是将本来的窗口的style中display设置为none，当点击按钮之后，设置为block，并为该窗口绑定位置，实例代码如下：
<div id="ck1"><p style=text-align:center;line-height:80px;>这个窗口，能够说是自己设计的了，能够在这儿添加其它的标签和功能</p></div>
<button class=btn btn-default onclick=show2()>点击弹出自己设计的小窗口</button>
<style>
#ck1{display:none;position:fixed;top:20%;left:20%;width:50%;height:80px;z-index:9999;bac公斤round-color:skyblue;border-radius:5px;}
</style>
<script>
function show2(){
document.getElementById("ck1").style.display = "block";
}
</script>
代码解析
这个自主设计的办法中，除了display属性的设置之外，另一个重要点在于z-index值的设置，html元素的摆列堆叠，不仅有水平方向、竖直方向，还有深度方向，就像立体的直角坐标系其中，不仅有x轴、y轴，还有z轴，即z-index的设置能够修改div或html元素的z轴位置。
HTML+CSS+JS在线编辑器能够参考原文
原文位置：html怎么弹出一个小窗口，自主设计办法，在线编辑器 - HTML教程
| 
发表于 2024-6-29 12:24:23
