使用JavaScript实现alert的实例代码

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

<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的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • js的alert样式如何更改如背景颜色

    js的alert样式如何更改如背景颜色

    复制代码 代码如下: window.alert = function(str) { var shield = document.createElement("DIV"); shield.id = "shield"; shield.style.position = "absolute"; shield.style.left = "0px"; shield.style.top = "0px"; shield.s

  • JavaScript基础教程之alert弹出提示框实例

    JavaScript基础教程之alert弹出提示框实例

    alert 命令弹出一个提示框 为便于对 JavaScript 有一个直观的认识,本节会提供几个简单的实例供 JavaScript 入门学习之用.下面的代码是一个弹出提示框的例子: 复制代码 代码如下: <script type="text/javascript"> alert("我是提示文字!"); </script> 将上面部分代码,用文本编辑器(如写字板或其他更高级的编辑器,如 EditPlus 等)保存为 alert.html(或 a

  • js重写alert控件(适合学习js的新手朋友)

    纯粹是为了打发时间,手写了一个JS的 alert控件. 代码如下: <html> <head> <script type="text/javascript"> var alertObj = new Object(); var generalStyle = { zIndex: 0, width: "200px", height: "100px", border: "thick solid #CCCCCC

  • 修改js confirm alert 提示框文字的简单实例

    修改js confirm alert 提示框文字的简单实例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style> *{padding: 0; margin: 0;} html{ height: 100%; } body{ font-size: 16px; font-family: "Microsoft Yahe

  • 禁止iframe页面的所有js脚本如alert及弹出窗口等

    今天做一个小软件遇到一个问题,就是在一个页面里面需要放一个iframe框架来预览网站,可是被预览的这个网站中含有很多js脚本,如弹出窗口,提示框,最可恶的是一直让设为首页和加入收藏,我想应该有办法禁止iframe里面的脚本吧,于是百度了一下,还发现不少新大陆,于是解决了这个问题,记录下来,方便以后查询,也方便大家参考: <iframe src="fillseo.html"></iframe> fillseo.html里面有个js脚本,其中有alert,还有弹出窗

  • JavaScript中的alert()函数使用技巧详解

    在JavaScript代码中,可以使用window对象的alert()函数来显示一段文本,从而进行程序的调试,或者向用户警示相关信息: 复制代码 代码如下: //Use window object's alert() function window.alert("sample text"); 这一写法可以简化为直接使用alert()函数: 复制代码 代码如下: //Simplified alert() usage alert("sample text"); 如果需要

  • JS实现alert中显示换行的方法

    本文实例讲述了JS实现alert中显示换行的方法.分享给大家供大家参考,具体如下: 先来介绍一种比较复杂的方法,但这种方法使用起来对所有型号的浏览器都能任意分辨: //浏览器类型判定 function getOs() { if(navigator.userAgent.indexOf("MSIE")>0) { return "IE"; //InternetExplor } else if(isFirefox=navigator.userAgent.indexOf

  • 让JavaScript的Alert弹出框失效的方法禁止弹出警告框

    本文将介绍让JavaScript的Alert弹出框失效的方法,也就是禁止让JS弹出警告框. 因为现在都提倡绿色上网环境,弹出框难免会影响你的心情,所以通过以下代码可将Js弹出框屏蔽掉. <script LANGUAGE="JavaScript"> <!-- window.alert = function(str){ return ; } alert("不能弹出警示框");//--> </script> 实现思路是对"al

  • 使用JavaScript实现alert的实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script> window.alert = alert; function alert(data) { var MainDiv = document.createElement("div"), p = document.createElement("p"), AllPage = document.createElement("div"), btn = document.crea

  • Javascript发送AJAX请求实例代码

    一个对AJAX的封装 //url就是请求的地址 //successFunc就是一个请求返回成功之后的一个function,有一个参数,参数就是服务器返回的报文体 function ajax(url,successFunc) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open("POST",url,true); xhr.onr

  • 使用JavaScript实现ajax的实例代码

    AJAX = Asynchronous JavaScript and XML. AJAX 是一种创建快速动态网页的技术. AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新.这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新. 实现ajax之前必须要创建一个 XMLHttpRequest 对象.如果不支持创建该对象的浏览器,则需要创建 ActiveXObject.具体方法如下: var xmlHttp; function createxmlHttpRequest()

  • JavaScript修改注册表实例代码

    注册表有关安全设置项的说明: 注册表路径: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings\Zones 1.         Zones 项包含表示为计算机定义的每个安全区域的项.默认情况下,定义以下 5个区域(编号从 0  到 4): 值                   设置 ------------------------------ 0                 我的电脑

  • JavaScript+CSS相册特效实例代码

    JavaScript+CSS相册特效实例代码

    嗯 就是这样一个例子,视频学到的一个特效,实际用处并不大,但是可以帮助理解JS语言和熟悉CSS3样式. 设计: 观察一张图片的变化,发现: 1.图片缩放(随机,并且不是同时运动) 1.从大到小 2.从小到大,透明度从1到0(在第一步运动完成后立马开始) 2.图片旋转(随机,并且不是同时运动的.需要在全部运动走完以后开始) 3. 因为每张图片是随机开始变换的,所以起始时间是不同的,这里可设置一个延迟器setTimeout,时间用random随机生成即可. 4. 中间需要用到自执行函数,因为setT

  • JavaScript实现二分查找实例代码

    二分查找的前提为:数组.有序.逻辑为:优先和数组的中间元素比较,如果等于中间元素,则直接返回.如果不等于则取半继续查找. /** * 二分查找,递归实现. * @param target * @param arr * @param start * @param end * @returns {*} */ function binarySearch(target,arr,start,end) { var start = start || 0; var end = end || arr.length

  • JavaScript判断微信浏览器实例代码

    先给大家说下我的项目需求:用户扫一扫二维码会产生一个链接,该链接会向后端发送个请求,返回一个 apk 的下载地址,用户点击下载按钮可以下载此 apk.然后就发生了问题,经过测试,发现用微信扫一扫打开的页面点击下载按钮下载不了 apk,后百度之,原来是微信内置浏览器屏蔽了下载链接,后面和需求方沟通,需求改为如果用户是用微信内置浏览器打开的,则提示用户换一个浏览器打开页面,否则下载不了 apk.那么该如何判断用户是否是用微信浏览器呢? 我们知道 js 可以通过 window.navigator.us

  • javascript数字验证的实例代码(推荐)

    javascript数字验证的实例代码(推荐)

    现在有一个需求如下图: 产品经理说Card Number只能让输入数字(中间的空格是格式自加的,也是用js实现的),有时候我脑海中出现了个声音,啥玩意,加个type=number不就行了,事实发现图样图森破了,先不说type=number后面会有个上下标(虽然用css可干掉),但是这个类型是支持科学输入法的,就是小数点和e这样的是可以输入的,于是乎只能用其他的方式了,后来想用检索到输入了非数字就干掉,但是这样还是能输入,想法被打回,于是乎最终采用了键盘输入控制的办法,其实很简单, 代码如下: v

  • ECHO.js 纯javascript轻量级延迟加载的实例代码

    ECHO.js 纯javascript轻量级延迟加载的实例代码

    ECHO.js 纯javascript轻量级延迟加载的实例代码 演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>简单的JavaScript图像延迟加载库Echo.js</title> <style> .demo img { width: 736px; height: 490px;

  • JavaScript tab选项卡插件实例代码

    今天,先从最简单的开始,将已有的一个Tab选项卡切换功能改写成javascript插件形式. 原生函数写法 将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面 我们先来看看最原始的使用函数写法的代码: tab.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta http

随机推荐