提示框文字的简单实例,JavaScript基础教程之alert弹出提示框实例

您也许感兴趣的稿子:

  • 修改js confirm alert
    提醒框文字的简约实例
  • JS落成alert中显示换行的措施
  • JavaScript中的alert()函数使用手艺详解
  • JavaScript基础教程之alert弹出提示框实例
  • 取缔iframe页面包车型客车具备js脚本如alert及弹出窗口等
  • 让JavaScript的Alert弹出框失效的章程禁止弹出警告框
  • js重写alert控件(适合学习js的菜鸟朋友)
  • js的alert样式如何转移如背景颜色

您大概感兴趣的稿子:

  • JS完毕alert中显得换行的秘诀
  • JavaScript中的alert()函数使用技艺详解
  • JavaScript基础教程之alert弹出提醒框实例
  • 禁止iframe页面包车型地铁兼具js脚本如alert及弹出窗口等
  • 让JavaScript的Alert弹出框失效的点子禁止弹出警告框
  • js重写alert控件(适合学习js的新手朋友)
  • js的alert样式怎样转移如背景颜色
  • 提示框文字的简单实例,JavaScript基础教程之alert弹出提示框实例。行使JavaScript完毕alert的实例代码

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; 
  } 

上述那篇修改js confirm alert
提醒框文字的归纳实例就是笔者分享给我们的全体内容了,希望能给我们一个参照,也冀望大家多多支持脚本之家。

图片 1

废话相当的少说了,直接给大家贴代码了,具体代码如下所示:

<!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 Yahei"; height: 100%; 
    }
    h1,h2,h3{
      font-weight: lighter;
    }
    a{
      text-decoration: none;
    }
    #selfWinsow{
      width: 60%; margin: 0 20%; background: #fff; position: fixed;top: 35%;border: 1px solid #ccc; padding: 0 2% 2% 2%; 

    }
    #slefClose{
      width: 25px; height: 25px; position: absolute;right: 1rem; top: 0.4rem; z-index: 9999; cursor: pointer;
    }
    #slefClose::after{
      position: absolute; width: 30px; height: 30px; content: "×"; font-size: 2.5rem; line-height: 30px;
    }
    #selfWinsow h2{
      font-size: 1rem; border-bottom: 1px solid #ccc; line-height: 100%; padding:1rem 0;
    }
    #selInfo{
      font-size: 0.95rem; line-height: 2.1rem; padding: 0.5rem;
    }
    #selfBtBox{
      padding: 1rem; margin: 0px auto; border: 1px solid #ccc; overflow: hidden;
    }
    .selfBt{
      padding: 0.8rem 2%;background: #323434; color: #fff; float: left; line-height: 100%; text-align: center; cursor: pointer;
    }
    .selfBtDouble{
      width: 46%; 
    }
    .selfBtSingle{
      color: #fff; width: 100%; padding: 0.8rem 0;
    }
    #selfOk{
      background: #323434; 
    }
    .selftalkNo{
      float: left;
      position: relative;
      top: -5px;
      padding: 4px 10px;
      display: inline-block;
      margin-left: 5px;
      color: #000;
    }
    .selftalkOk{
      float: right;
      position: relative;
      top: -5px;
      display: inline-block;
      margin-right: 5px;
      padding: 4px 10px;
      color: #fff;
    }
    #selfNo,#linkTo2{
      background: #eeeeee; color: #555555 
    }
    #selfBack{
      width: 100%; background: rgba(0,0,0,.6);
    }
    #selfInput{
      display: block;
      width: 100%; padding: 0.5rem 0; border: 1px solid #eee; border-radius: 3px; margin-bottom: 1rem; text-indent: 0.6rem
    }
    #selfInput:focus{
      border: 1px solid #087690;
    }

  </style>
  <title></title>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <!--<script type="text/javascript" src="SelfWindow.js"></script>-->
  <script>

    /*
*selfWindow组建,主要是用于模拟移动网站的alert(),confirm()窗口点解某一按钮跳转到某一个页面的效果,
*因为给予移动web,所以没有兼容低版本ie
*调用方法:var win = new SelfWinsow({
*          types : "confirm",//这里可以选择的参数有,alert,confirm,confirm2,link
*          slefTitle : "香送网温馨提示",//弹窗标题
*          selfInfo : "Are you really to remove this tool?",//弹窗信息
*          selfOk : "YES",//自定义确定按钮文字
*          selfNo : "NO",//自定义否认按钮文字
*          callback:fn,//当types为confirm,confirm2或者是talk时的回调函数,confirm为模拟            
*/

var SelfWinsow = function(settings){this.init(settings)};
SelfWinsow.prototype = {
  init:function(settings){ 
    this.opts = {
      types : "",
      slefTitle : "",
      selfInfo : typeof settings == "string" ? settings : "if have any incorrect , and you will continue?",
      selfOk : "continue operator the deposit",
      selfNo : "back loading page"
    };

    this.setting(settings);
    if(typeof settings == "string"){
      this.opts.selfInfo == settings;
    }
    if(settings == "" || settings == undefined || settings == null){
      this.selfAlert();  
    }else if(settings.types == "confirm"){
      this.selfConfirm();
    }else if(settings.types == "confirm2"){
      this.selfConfirm2();
    }else if(settings.types == "link"){
      this.selfLink();
    }else if(settings.types=="talk"){
      this.selfMobileTalk();
    }else{
      this.selfAlert();
    }
  },
  //confirm窗口
  selfConfirm:function(){
    var _this = this;
    var html="<div id='selfWinsow'><div id='slefClose'><\/div><h2 id='slefTitle'>"+_this.opts.slefTitle+"<\/h2><p id='selInfo'>"+_this.opts.selfInfo+"<\/p><div id='selfOk' class='selfBt selfBtDouble'>"+_this.opts.selfOk+"<\/div><div id='selfNo' class='selfBt selfBtDouble'>"+_this.opts.selfNo+"<\/div><\/div>";
    this.createMask(html);
    this.selfEvents();
  },

  //alert窗口
  selfAlert:function(){
    var _this = this;
    var html="<div id='selfWinsow'><div id='slefClose'><\/div><h2 id='slefTitle'>"+_this.opts.slefTitle+"<\/h2><p id='selInfo'>"+_this.opts.selfInfo+"<\/p><div id='selfOk' class='selfBt selfBtSingle'>"+_this.opts.selfOk+"<\/div><\/div>";
    this.createMask(html);
    this.selfEvents();
  },
  selfConfirm2:function(){
    var _this = this;
    var html="<div id='selfWinsow'><div id='slefClose'><\/div><h2 id='slefTitle'>"+_this.opts.slefTitle+"<\/h2><p id='selInfo'>"+_this.opts.selfInfo+"<\/p><div id='selfOk' class='selfBt selfBtSingle'>"+_this.opts.selfOk+"<\/div><\/div>";
    this.createMask(html);
    this.selfEvents();
  },
  //带链接窗口
  selfLink:function(){
    var _this = this;
    var html="<div id='selfWinsow'><div id='slefClose'><\/div><h2 id='slefTitle'>"+_this.opts.slefTitle+"<\/h2><p id='selInfo'>"+_this.opts.selfInfo+"<\/p><a id='selfOk' href='"+_this.opts.linkTo1+"' class='selfBt selfBtDouble'>"+_this.opts.selfOk+"<\/a><a id='linkTo2' href='"+_this.opts.linkTo2+"' class='selfBt selfBtDouble'>"+_this.opts.selfNo+"<\/div><\/div>";
    this.createMask(html);
    this.selfEvents();
  },

  selfMobileTalk:function(){
    var _this = this;
    var html="<div id='selfWinsow' style='width:100%;margin:0px;top:0;left:0;padding:0; background:none;border:none;font-size:16px'><h2 style='text-align:center; background:#fff' id='slefTitle'>"+_this.opts.selfNo+"<\/span>"+_this.opts.slefTitle+"<b id='selfOk' style='background:#fff;color:#ff0028;cursor: pointer;' class='selftalkOk'>"+_this.opts.selfOk+"<\/b><\/h2><textarea style='width:90%; border:1px solid #ccc; font-size:14px; display:block; margin:10px auto; height:120px' id='selfTextarea' placeholder='请填写您的特殊要求'><\/textarea><\/div>";
    this.createMask(html);
    var selfBack = document.getElementById("selfBack");
    selfBack.style.backgroundColor="#eee";
    this.selfEvents();
  },

  //事件处理
  selfEvents:function(){
    this.selfOk();
    var selfNo = document.getElementById('selfNo');
    selfNo && this.slefNo();  
  },

  //确定按钮事件
  selfOk:function(){
    var _this = this;
    var type = this.opts.types;
    var bt=true;
    var selfOk = document.getElementById("selfOk");
    function selfOkFun(e){
      var e = e || window.event;
      var el = e.scrElement || e.target;
      if (el.id == "selfOk" || el.tagName=="IMG") {
        if(type == "alert"){
          _this.selfRemoveBack();  
        }else if(type == "confirm" || type == "talk" || "confirm2"){
          if(bt){
            _this.opts.callback();
          }else{
            return false;
          }
          _this.selfRemoveBack();
          bt=false;
        }

      }
    }

    document.removeEventListener('click',selfOkFun,false);
    document.addEventListener('click',selfOkFun,false);

  },
  //创建背景遮罩
  createMask:function(html){
    var selfBack = document.getElementById("selfBack");

    if(selfBack){
      return false;
    }else{
      var selfBack=document.createElement('div');
      selfBack.id = "selfBack";
      selfBack.style.position = "fixed",
      selfBack.style.top = "0",
      selfBack.style.left = "0",
      selfBack.style.right = "0",
      selfBack.style.bottom = "0",
      document.body.appendChild(selfBack);
      selfBack.innerHTML = html;
      this.slefClose();
    }
  },

  //关闭按钮事件
  slefClose:function(){
    var _this = this;
    document.addEventListener('click',function(e){
      var e = e || window.event;
      var el = e.scrElement || e.target;
      if(el.id == "slefClose"){
        if(_this.opts.callback){
          _this.opts.callback = function(){};
          _this.selfRemoveBack();
          return;
        }
        _this.selfRemoveBack();
      }

    });
  },

  //拒绝或者否认按钮事件
  slefNo:function(){
    var _this = this;
    document.addEventListener('click',function(e){
      var e = e || window.event;
      var el = e.scrElement || e.target;
      if(el.id == "selfNo" ||el.tagName == "IMG"){
        if(_this.opts.callback){
          _this.opts.callback = function(){};
          _this.selfRemoveBack();
          return;
        }
        _this.selfRemoveBack();
      }
    })
  },
  //移除窗口功能
  selfRemoveBack:function(){
    try{
      var selfBack = document.getElementById('selfBack')
      document.body.removeChild(selfBack);
    }catch(e){}
  },

  //参数配置功能函数
  exetends:function(a,b){
    for( var attr in b){
      a[attr] = b[attr];
    }
  },

  //参数配置以及重写
  setting:function(settings){
    this.exetends(this.opts,settings) 
  }, 


}
  </script>


  <script>
  window.onload = function(){

    var Ord1 = document.getElementById("rd1");
    var Ord2 = document.getElementById("rd2");
    var Otext = document.getElementById("text");
    var Obtn = document.getElementById("btn");

    var browser = navigator.appName;

    var getText = function(objText){
      /*if(browser == 'Netscape'){
        if(objText.indexOf("TextArea") > -1){
          return objText.value;
        }else{
          return objText.textContent;
        }
      }else if(browser == 'Microsoft Internet Explorer'){
        return objText.innerText;
      }*/
      return objText.value;
    }

    var text = getText(Otext);
    var len= text.length;
    Otext.disabled = true;

    /*
    Ord2.onclick = function(){
      if(Ord2.checked){
        //alert("ok");
        if(len == 0){
          var selfConfirm = new SelfWinsow({
                types : "confirm",
                callback:function(){}
              });

          //alert(selfConfirm);
          Otext.disabled = false;
          //Otext.onfocus;
        }
      }

    }

    Ord1.onclick = function(){

      if(Ord1.checked){
        Otext.disabled = true;
        Otext.value = "";
        Otext.innerText = "";
        Otext.textContent = "";
      }
    }
      */

    var aadEvent = function(e, type, target){

      e = e || window.e;
      if(e.addEventListener){
        e.addEventListener(type, function(){
          if(e.id == 'rd2'){
            target.disabled = false;
            var selfConfirm = new SelfWinsow({
                slefTitle : "option tips for user",
                types : "confirm",
                selfInfo : typeof settings == "string" ? settings : "if have any incorrect , and you will continue?",
                selfOk : "continue operator the deposit",
                selfNo : "back loading page",
                callback:function(){}
              });

          }else if(e.id == 'rd1'){
            target.innerIext = '';
            target.value = '';
            target.textContent = "";
            target.disabled = true;
          }else if(e.id == 'btn'){
            var text = getText(target);
            var len= text.length;
            if(target.disabled==false && len == 0){
              var selfConfirm = new SelfWinsow({
                slefTitle : "option tips for user",
                types : "alert",
                selfInfo : typeof settings == "string" ? settings : "please input textarea content for customer",
                selfOk : "OK",

                callback:function(){}
              });

            }
          }
        }, false);

      }else if(e.attachEvent){
        e.attachEvent('on'+'type', function(){
          if(e.id == 'rd2'){
            target.disabled = false;
            var selfConfirm = new SelfWinsow({
                types : "confirm",
                callback:function(){}
              });

          }else if(e.id == 'rd1'){
            target.innerIext = '';
            target.value = '';
            target.textContent = "";
            target.disabled = true;
          }
          else if(e.id == 'btn'){
            var text = getText(target);
            var len= text.length;
            if(target.disabled==false && len == 0){
              var selfConfirm = new SelfWinsow({
                slefTitle : "option tips for user",
                types : "alert",
                selfInfo : typeof settings == "string" ? settings : "please input textarea content for customer",
                selfOk : "OK",

                callback:function(){}
              });

            }
          }
        }, false);
      }

    };

    aadEvent(Ord2, 'click', Otext);
    aadEvent(Ord1, 'click', Otext);
    aadEvent(Obtn, 'click', Otext);


}
  </script>
</head>
<body style="width:80%; margin: 20% auto;">

  <form action="" method="get">
    <input id="rd1" form="btn" type="radio" value="11111" name="radio" checked=true>first time purchase<br/><br/>

    <section style="float:left;">
    <input id="rd2" form="btn" type="radio" value="22222" name="radio" >Alternate(s) offer:</section>
    <section style="float:left; margin:10px 10px">
    <textarea id="text" form="btn" cols="30" rows="7" maxlength="100" style="width:600px;"></textarea>
    </section>

  </form>
  <footer style="clear:both; float:right; margin-right:10%;">
    <input id="btn" name="btn" type="submit" value="Next" style="width:60px; height:30px">
  </footer>
</body>
</html>

复制代码 代码如下:

以上所述是小编给我们介绍的使用JavaScript实现alert的实例代码,希望对我们有着接济,假使大家有其余疑问请给自己留言,作者会及时过来大家的。在此也特别感激大家对台本之家网址的帮助!

修改js confirm alert
提醒框文字的总结实例

您恐怕感兴趣的稿子:

  • 修改js confirm alert
    提醒框文字的简短实例
  • JS达成alert中展现换行的方法
  • JavaScript中的alert()函数使用本领详解
  • 不准iframe页面包车型地铁兼具js脚本如alert及弹出窗口等
  • 让JavaScript的Alert弹出框失效的措施禁止弹出警告框
  • js重写alert控件(适合学习js的菜鸟朋友)
  • js的alert样式怎样转移如背景颜色
  • 行使JavaScript完成alert的实例代码