自编jQuery插件实现模拟alert和confirm


Posted in Javascript onSeptember 01, 2014

啥也不说,先上图,有图有真相 :)

自编jQuery插件实现模拟alert和confirm

自编jQuery插件实现模拟alert和confirm

现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了。因此这个插件就这样产生了...

来看插件的实现代码吧:

(function () {
  $.MsgBox = {
    Alert: function (title, msg) {
      GenerateHtml("alert", title, msg);
      btnOk(); //alert只是弹出消息,因此没必要用到回调函数callback
      btnNo();
    },
    Confirm: function (title, msg, callback) {
      GenerateHtml("confirm", title, msg);
      btnOk(callback);
      btnNo();
    }
  }

  //生成Html
  var GenerateHtml = function (type, title, msg) {

    var _html = "";

    _html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>';
    _html += '<a id="mb_ico">x</a><div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';

    if (type == "alert") {
      _html += '<input id="mb_btn_ok" type="button" value="确定" />';
    }
    if (type == "confirm") {
      _html += '<input id="mb_btn_ok" type="button" value="确定" />';
      _html += '<input id="mb_btn_no" type="button" value="取消" />';
    }
    _html += '</div></div>';

    //必须先将_html添加到body,再设置Css样式
    $("body").append(_html); GenerateCss();
  }

  //生成Css
  var GenerateCss = function () {

    $("#mb_box").css({ width: '100%', height: '100%', zIndex: '99999', position: 'fixed',
      filter: 'Alpha(opacity=60)', backgroundColor: 'black', top: '0', left: '0', opacity: '0.6'
    });

    $("#mb_con").css({ zIndex: '999999', width: '400px', position: 'fixed',
      backgroundColor: 'White', borderRadius: '15px'
    });

    $("#mb_tit").css({ display: 'block', fontSize: '14px', color: '#444', padding: '10px 15px',
      backgroundColor: '#DDD', borderRadius: '15px 15px 0 0',
      borderBottom: '3px solid #009BFE', fontWeight: 'bold'
    });

    $("#mb_msg").css({ padding: '20px', lineHeight: '20px',
      borderBottom: '1px dashed #DDD', fontSize: '13px'
    });

    $("#mb_ico").css({ display: 'block', position: 'absolute', right: '10px', top: '9px',
      border: '1px solid Gray', width: '18px', height: '18px', textAlign: 'center',
      lineHeight: '16px', cursor: 'pointer', borderRadius: '12px', fontFamily: '微软雅黑'
    });

    $("#mb_btnbox").css({ margin: '15px 0 10px 0', textAlign: 'center' });
    $("#mb_btn_ok,#mb_btn_no").css({ width: '85px', height: '30px', color: 'white', border: 'none' });
    $("#mb_btn_ok").css({ backgroundColor: '#168bbb' });
    $("#mb_btn_no").css({ backgroundColor: 'gray', marginLeft: '20px' });


    //右上角关闭按钮hover样式
    $("#mb_ico").hover(function () {
      $(this).css({ backgroundColor: 'Red', color: 'White' });
    }, function () {
      $(this).css({ backgroundColor: '#DDD', color: 'black' });
    });

    var _widht = document.documentElement.clientWidth; //屏幕宽
    var _height = document.documentElement.clientHeight; //屏幕高

    var boxWidth = $("#mb_con").width();
    var boxHeight = $("#mb_con").height();

    //让提示框居中
    $("#mb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });
  }


  //确定按钮事件
  var btnOk = function (callback) {
    $("#mb_btn_ok").click(function () {
      $("#mb_box,#mb_con").remove();
      if (typeof (callback) == 'function') {
        callback();
      }
    });
  }

  //取消按钮事件
  var btnNo = function () {
    $("#mb_btn_no,#mb_ico").click(function () {
      $("#mb_box,#mb_con").remove();
    });
  }
})();

Html代码结构如下,js里面拼接的不直观,给出如下:

<div id="mb_box"></div>
<div id="mb_con">
    <span id="mb_tit">title</span><a id="mb_ico">x</a>
    <div id="mb_msg">msg</div>
    <div id="mb_btnbox">
      <input id="mb_btn_ok" type="button" value="确定" />
      <input id="mb_btn_no" type="button" value="取消" />
    </div>
</div>

mb_box为半透明遮罩层,将整个页面遮住,禁止操作;mb_con为提示框。之所以没把mb_con放在mb_box里面,是因为如果放里面的话,对mb_box设置的透明度会影响到mb_con,使mb_con也会变成透明的。之前也试过background-color:rgba(),可惜ie8及以下版本不支持。所以还是把mb_con拿到外面来了,通过设置z-index使其mb_box的上面。

为了使插件使用方便,特意的没有用到图片,全是通过css来控制界面效果,使用时,引用一个js文件就可以了。css样式在js中写死了,这点可能不太灵活,但使用却很方便如果你对界面样式不满意或者与你网站的色彩风格不一致,那只能自行修改了。

由于弹出层(div)无法做到像原始的alert和confirm那样做到页面阻塞效果,因此只能通过 回调函数 来进行模拟。也因为这个原因,后台数据操作只能通过回调函数配合ajax来完成的。

Demo如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>模拟alert和confirm提示框</title>
</head>
<body>
  <input id="add" type="button" value="添加" />
  <input id="delete" type="button" value="删除" />
  <input id="update" type="button" value="修改" />

  <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
  <script src="../js/jquery.similar.msgbox.js" type="text/javascript"></script>
  <script type="text/javascript">

    $("#add").bind("click", function () {
      $.MsgBox.Alert("消息", "哈哈,添加成功!");
    });

    //回调函数可以直接写方法function(){}
    $("#delete").bind("click", function () {
      $.MsgBox.Confirm("温馨提示", "执行删除后将无法恢复,确定继续吗?温馨提示", function () { alert("你居然真的删除了..."); });
    });


    function test() {
      alert("你点击了确定,进行了修改");
    }
    //也可以传方法名 test
    $("#update").bind("click", function () {
      $.MsgBox.Confirm("温馨提示", "确定要进行修改吗?", test);
    });

    //当然你也可以不给回调函数,点击确定后什么也不做,只是关闭弹出层

 //$("#update").bind("click", function () { $.MsgBox.Confirm("温馨提示", "确定要进行修改吗?"); });

  </script>
</body>
</html>

代码量并不多,如有什么疑问可以留言 :)

Javascript 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
jQuery Selector选择器小结
May 06 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
JavaScript创建表格的方法
Apr 13 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 #Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 #Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 #Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 #Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 #Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 #Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 #Javascript
You might like
PHP4中实现动态代理
2006/10/09 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php实现cookie加密的方法
2015/03/10 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
自荐信格式范文
2013/10/07 职场文书
材料加工硕士生求职信
2013/10/10 职场文书
农民工创业典型事迹
2014/01/25 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
小学生读书活动总结
2014/06/30 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
单位委托书格式范本
2014/09/29 职场文书
学生检讨书怎么写
2014/10/09 职场文书
功夫熊猫观后感
2015/06/10 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL