html中,怎么做一个弹出式的大小固定的小窗口?

说实话，这三种原生弹窗确实挺鸡肋的，尤其是想搞个自定义样式的。
我之前做项目时也踩过坑，当时需求是做个带进度条的提示框，结果用alert直接被用户怼回去了。

你看这场景：用户点个"立即购买"按钮，弹个5 002 00的遮罩层，里面有个进度条慢慢走，走完自动消失。
用confirm肯定不行，用prompt更离谱。
这时候就得自己动手了。

HTML结构其实挺简单的，我当时就这么写的：
<button class="btn">点击我</button>
注意这几点：mask是遮罩层，popup是弹窗主体，close是关闭按钮，bk是纯色背景。
我特意把mask设为绝对定位，popup也跟着绝对定位在mask中间。

CSS是关键，记得写个z-index的继承链： css .mask { position: fixed; top: 0; left: 0; width: 1 00%; height: 1 00%; background: rgba(0,0,0,0.5 ); z-index: 1 000; } .popup { position: absolute; top: 5 0%; left: 5 0%; transform: translate(-5 0%, -5 0%); width: 5 00px; height: 2 00px; background: white; border-radius: 5 px; z-index: 1 001 ; }
这里要注意transform不是必须的，但能保证居中更精确。
我当时在IE1 1 上测试时，发现没加transform弹窗会偏上。

jQuery部分其实就几行： javascript $('.btn').click(function() { $('.mask').show(); // 进度条动画，5 00ms内从0到1 00 $('.progress').animate({value: 1 00}, 5 00, function() { if ($('.progress').val() == 1 00) { $('.mask').hide(); } }); });
$('.close').click(function() { $('.mask').hide(); });
$('.bk').click(function() { $('.mask').hide(); });
这里有个小技巧：我给bk也加了click事件，防止用户点弹窗内部触发关闭。
当时测试发现有个bug，进度条在Firefox下会卡在9 9 %，最后改用setTimeout来强制关闭。

这种自定义弹窗的好处是能实现alert做不到的交互，比如带按钮、带动画。
不过缺点是写起来比较啰嗦，兼容性也得自己测试。
我记得有一回用Flexbox写弹窗，在老版Android上会显示不全，最后还是用绝对定位搞定了。

数据我记得是2 01 9 年左右，Chrome把alert的样式改得更难看了，当时我接的几个老项目就得全部重写。
现在看这些原生弹窗的局限挺明显的，除非特别简单的提示，我都直接用第三方库了，比如SweetAlert那套，写起来省事多了。

html 怎么点击一个按钮弹出一个提示框

材料固定。
电脑、浏览器、编辑器。

电脑：Windows或Mac皆可。
浏览器：Chrome、Firefox最新版。
编辑器：Notepad++、Sublime Text。

新建文件：index.，纯文本格式保存。
代码：

<head> <title>测试页面</title> </head> <body> <button onclick=fun()">点我试试</button> [xss_clean] function fun() { alert('clicksuccess!'); } [xss_clean] </body> </>
保存后直接用Chrome打开。
右键另存为，文件类型选择"所有网页(.;.htm)"。

测试：5 秒内能弹出提示框算成功。
如果Firefox不行，换Chrome。

html点击按钮弹出注册页面

这就是一个简单的按钮点击跳转页面实现。

时间：2 001 年 数字：一行代码搞定
别信花里胡哨的框架 直接用 onclick