当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 使用JavaScript实现alert的实例代码

使用JavaScript实现alert的实例代码

2017年12月12日  | 移动技术网IT编程  | 我要评论

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<script> 
  window.alert = alert; 
  function alert(data) { 
    var maindiv = document.createelement("div"), 
      p = document.createelement("p"), 
      allpage = document.createelement("div"), 
      btn = document.createelement("div"), 
      textnode = document.createtextnode(data ? data : ""), 
      btntext = document.createtextnode("确定"); 
    // 控制样式 
    css(allpage, { 
      "position": "fixed", 
      " _position": "absolute", 
      " width": "100%", 
      "height": "100%", 
      "left": "0", 
      "top": "0", 
      "background": "rgba(0, 0, 0,0.5)", 
      "-moz-opacity": "0.5", 
      "filter": "alpha(opacity=50)", 
      "z-index": "97", 
    }); 
    css(maindiv, { 
      "position": "fixed", 
      "left": "0", 
      "right": "0", 
      "top": "30%", 
      "width": "14rem", 
      "height": "5rem", 
      "padding-top":"0.5rem", 
      "margin": "0 auto", 
      "background-color": "white", 
      "font-size": "0.75rem", 
      "text-align": "center", 
      "position": "relative", 
      "border-radius": "5px 5px 5px 5px", 
    }); 
    css(btn, { 
      "background": "#de241b", 
      "color": "white", 
      "width": "6rem", 
      "margin-left": "4rem", 
      "margin-bottom":"0.25rem", 
      "height": "1.5rem", 
      "border-radius": "5px 5px 5px 5px", 
      "position": "absolute", 
      "padding-top":"0.5rem", 
      "bottom":"0", 
    }) 
    // 内部结构套入 
    p.appendchild(textnode); 
    btn.appendchild(btntext); 
    maindiv.appendchild(p); 
    maindiv.appendchild(btn); 
    allpage.appendchild(maindiv); 
    // 整体显示到页面内 
    document.getelementsbytagname("body")[0].appendchild(allpage); 
    //禁止滚动 
    $("body").on("touchmove", function (event) { 
      event.preventdefault; 
    }, false) 
    // 确定绑定点击事件删除标签 
    btn.onclick = function () { 
      allpage.parentnode.removechild(allpage); 
      //启用滚动 
      $("body").off("touchmove"); 
    } 
  } 
  function css(targetobj, cssobj) { 
    var str = targetobj.getattribute("style") ? targetobj.getattribute("style") : ""; 
    for (var i in cssobj) { 
      str += i + ":" + cssobj[i] + ";"; 
    } 
    targetobj.style.csstext = str; 
  } 

以上所述是小编给大家介绍的使用javascript实现alert的实例代码,希望对大家有所帮助

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网