首页/日志/正文

无限弹窗

首先呢,是必不可少的css样式:

  1. .tc_div{background: #fff;border: 1px solid #cdcdcd;width: 200px;border-radius: 5px;box-shadow: 0px 2px 10px #CECACA;position: absolute;}
  2. .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;}
  3. .tc_div h3 b{float: right;cursor: pointer;}
  4. .tc_div p{padding: 6px 8px;}

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

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

最后,最重要的javascript代码来了:

  1. <script>
  2. /* div弹出层 */
  3. $(document).ready(function() {
  4. function doing(Min, Max, Time, Pl, Pt) { /* Min 最少弹出数 Max 最大弹出数 Time 延迟时间 Pl 距离左侧最大百分比 Pt 距离顶部最大百分比 */
  5. if (isNaN(Min) || isNaN(Max) || isNaN(Time) || isNaN(Pl) || isNaN(Pt)) return false; /* 判断输入的是否是数字 */
  6. run = setInterval(function() {
  7. if ((Min > Max - 1) && (Max != 0)) clearInterval(run); /* 如果超过最大弹出数则停止 Max为0则无限弹出 */
  8. pl = parseInt(Math.random() * Pl + 1); /* 随机 1~Pl */
  9. pt = parseInt(Math.random() * Pt + 1); /* 随机 1~Pt  */
  10. tc_div = '<div id="tc_div_' + Min + '" class="tc_div"><h3>小弹窗 No.' + Min + ' <b class="close">×</b> </h3><p>我是第' + Min + '个小弹窗</p></div>';
  11. $(".tc_main").append(tc_div);
  12. $("#tc_div_" + Min).css({left: pl + "%",top: pt + "%", "z-index": "100"});
  13. Min++; /* 自增 */
  14. },
  15. Time);
  16. }
  17. /* 浏览器弹窗 */
  18. function RunAlert() {
  19. var i, o, x, z = 10; /* z  弹出次数 */
  20. if (confirm("(●′ω`●)  分分钟弹死你,你信不信?")) { /* 信则弹10*10*10次 不信再说 */
  21. for (i = 1; i <= z; i++) {
  22. alert("(= ̄ω ̄=)  霸气第" + i + "弹");
  23. for (o = 1; o <= z; o++) {
  24. alert("(= ̄ω ̄=)  霸气第" + i + "弹 \n(。・`ω´・)  骚气第" + o + "弹");
  25. for (x = 1; x <= z; x++) {
  26. alert("(= ̄ω ̄=)  霸气第" + i + "弹 \n(。・`ω´・)  骚气第" + o + "弹  \n( ̄へ ̄)  合体第" + x + "弹");
  27. }
  28. }
  29. }
  30. } else {
  31. alert("╮( ̄⊿ ̄\")╭  切,量你也没这个胆子!");
  32. if (confirm("(ง •̀ω•́)ง  试试新玩法?")) { /* 询问是否换个花样  */
  33. $(".tc_main").empty();
  34. doing(1, 0, 100, 85, 88); /* 每100毫秒弹一次 弹到屎 */
  35. } else {
  36. alert("(′◔◞౪◟◔)  原来是个胆小鬼!一边玩去!");
  37. return false;
  38. }
  39. }
  40. }
  41. $("#tc_click").click(function() { /* 敢点就敢弹 */
  42. RunAlert();
  43. });
  44. $(".tc_main").click(function(e) {
  45. var id = e.target.offsetParent.id;
  46. $("#" + id).css("z-index", "+=1"); /* 堆叠层数+1 */
  47. if (e.target.className == "close") {
  48. $("#" + id).remove(); /* 如果手速快 每个弹窗都可以关掉 */
  49. }
  50. })
  51. })
  52. </script>

还没有评论,快来抢沙发!

发表评论

  • 😉
  • 😐
  • 😡
  • 😈
  • 😯
  • 😛
  • 😳
  • 😮
  • 😆
  • 💡
  • 😀
  • 👿
  • 😥
  • 😎
  • 😕