html怎么弹出一个小窗口,自主设计方法,在线编辑器

html怎么弹出一个小窗口

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

alert()方法弹出一个小窗口实例

<button class='btn btn-default' onclick='show()'>点击弹出一个小窗口</button>
<script>
  function show(){
  	alert("这个小窗口很简单!");
  }
  
</script>

自主设计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;background-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教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.