首先呢,是必不可少的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>