无限弹窗 | 窃窃私语のBlog

首先呢，是必不可少的css样式：

.tc_div{background: #fff;border: 1px solid #cdcdcd;width: 200px;border-radius: 5px;box-shadow: 0px 2px 10px #CECACA;position: absolute;}
.tc_div h3{background: #E4E4E4;font:bold 15px Arial,Microsoft Yahei;padding: 4px 8px;margin: 0;border-bottom: 1px solid #cdcdcd;border-radius: 5px 5px 0 0;}
.tc_div h3 b{float: right;cursor: pointer;}
.tc_div p{padding: 6px 8px;}

接着是超文本标记语言HTML代码：

<p>我是无良弹窗君 ( *・ω・)✄ <a href="###" id="tc_click" style="text-decoration:underline;"> 敢戳我？分分钟弹死你！</a></p>
<div class="tc_main"></div>

最后，最重要的javascript代码来了：

<script>
/* div弹出层 */
$(document).ready(function() {
function doing(Min, Max, Time, Pl, Pt) { /* Min 最少弹出数 Max 最大弹出数 Time 延迟时间 Pl 距离左侧最大百分比 Pt 距离顶部最大百分比 */
if (isNaN(Min) || isNaN(Max) || isNaN(Time) || isNaN(Pl) || isNaN(Pt)) return false; /* 判断输入的是否是数字 */
run = setInterval(function() {
if ((Min > Max - 1) && (Max != 0)) clearInterval(run); /* 如果超过最大弹出数则停止 Max为0则无限弹出 */
pl = parseInt(Math.random() * Pl + 1); /* 随机 1~Pl */
pt = parseInt(Math.random() * Pt + 1); /* 随机 1~Pt */
tc_div = '<div id="tc_div_' + Min + '" class="tc_div"><h3>小弹窗 No.' + Min + ' <b class="close">×</b> </h3><p>我是第' + Min + '个小弹窗</p></div>';
$(".tc_main").append(tc_div);
$("#tc_div_" + Min).css({left: pl + "%",top: pt + "%", "z-index": "100"});
Min++; /* 自增 */
},
Time);
}
/* 浏览器弹窗 */
function RunAlert() {
var i, o, x, z = 10; /* z 弹出次数 */
if (confirm("(●′ω`●) 分分钟弹死你，你信不信？")) { /* 信则弹10*10*10次不信再说 */
for (i = 1; i <= z; i++) {
alert("(=￣ω￣=) 霸气第" + i + "弹");
for (o = 1; o <= z; o++) {
alert("(=￣ω￣=) 霸气第" + i + "弹 \n(｡・`ω´･) 骚气第" + o + "弹");
for (x = 1; x <= z; x++) {
alert("(=￣ω￣=) 霸气第" + i + "弹 \n(｡・`ω´･) 骚气第" + o + "弹 \n(￣へ￣) 合体第" + x + "弹");
}
}
}
} else {
alert("╮(￣⊿￣\")╭ 切，量你也没这个胆子！");
if (confirm("(ง •̀ω•́)ง 试试新玩法？")) { /* 询问是否换个花样 */
$(".tc_main").empty();
doing(1, 0, 100, 85, 88); /* 每100毫秒弹一次弹到屎 */
} else {
alert("(′◔◞౪◟◔) 原来是个胆小鬼！一边玩去！");
return false;
}
}
}
$("#tc_click").click(function() { /* 敢点就敢弹 */
RunAlert();
});
$(".tc_main").click(function(e) {
var id = e.target.offsetParent.id;
$("#" + id).css("z-index", "+=1"); /* 堆叠层数+1 */
if (e.target.className == "close") {
$("#" + id).remove(); /* 如果手速快每个弹窗都可以关掉 */
}
})
})
</script>

发表评论