外链论坛

 找回密码
 立即注册
搜索
查看: 71|回复: 4

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

[复制链接]

2964

主题

144

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139409
发表于 2024-6-29 12:24:23 | 显示全部楼层 |阅读模式

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教程





上一篇:html、css 实现网页弹出层
下一篇:【每日练习02】纯CSS弹窗(HTML+CSS)
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-9-3 21:41:26 | 显示全部楼层
这夸赞甜到心里,让我感觉温暖无比。
回复

使用道具 举报

3092

主题

3万

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99098758
发表于 2024-10-5 06:53:09 | 显示全部楼层
我完全赞同你的观点,思考很有深度。
回复

使用道具 举报

3062

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99138980
发表于 2024-10-9 10:06:15 | 显示全部楼层
太棒了、厉害、为你打call、点赞、非常精彩等。
回复

使用道具 举报

2989

主题

3万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569158
发表于 2024-10-15 17:10:09 | 显示全部楼层
论坛外链网  http://www.fok120.com/
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-23 12:34 , Processed in 0.116881 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.