在项目过程中会遇到需要使用自己定义的弹出框的情况。以前用过ymprompt，但是它太复杂而且不好自己操控。所以自己写了一个弹出框实例。

　　主要有两类弹出框alert和confirm。基于jQuery

alert([title,]des[,callback]):

　　title: 弹出框标题，string类型，可选

　　des: 弹出框内容描述，string类型，必须

　　callback: 弹出框点击按钮后的回调函数，可选

　　效果图如下

　　

　　

confirm([title,]des,callback)：

　　title: 弹出框标题，string类型，可选

　　des: 弹出框内容描述，string类型，必须

　　callback: 弹出框点击按钮后的回调函数，必须

　　效果图如下

　　

　　

　　处理上都比较简单，需要注意的有以下几点：

　　1.对传入参数的多样处理

　　2.完成初始化以后需要按钮上焦点

　　3.响应回调之前需要把弹出框隐藏起来。

　　4.由于我们自定义的弹出框，confirm不能使用if(confirm('确认？') == true){expression}这种方式而是使用回调来处理。

　　

　　完整源码alert.js如下（可以根据需要自己做拓展）。

var confirmCallbacks = '';

var alertCallbacks = '';

/*至少一个参数des*/

function alert(title,des,callback){

    if(!title){

        top.alert('请为alert函数输入正确的参数！');

        return;

    }else if(!des){

        des = title;

        title = '信息提示';

    }else if(des && !callback){

        if(typeof des == 'function'){

            callback = des;

            des = title;

            title = '信息提示';

        }

    }

    $('.xgalert .modal-header').addClass('warning')

    $('#alert_title').html(title);

    $('#alert_des').html(des);

    $('.btn.btn-warning').html('确定').show();

    $('.btn.btn-primary').hide();

    alertCallbacks = callback;

    $('.xgalert').addClass('active');

    setTimeout(function(){$('.btn.btn-warning')[0].focus()},100);

}

//注意此处confirm不能使用if(confirm('确认？') == true){expression}这种方式,

//只能把expression写到回调中

//至少两个参数des,callback

function confirm(title,des,callback){

    if(!title || !des){

        top.alert('请为confirm函数输入正确的参数！');

        return;

    }else if(!callback){

        callback = des;

        des = title;

        title = '信息提示';

    }

    $('.xgalert .modal-header').removeClass('warning')

    $('.xgalert').addClass('active')

    $('#alert_title').html(title);

    $('#alert_des').html(des);

    $('.btn.btn-warning').html('取消').show();

    $('.btn.btn-primary').html('确定').show();

    confirmCallbacks = callback;

    $('.xgalert').addClass('active')

    setTimeout(function(){$('.btn.btn-warning')[0].focus()},100);

}

$(function(){

    $(document).on('click','.xgalert .btn.btn-warning',function(){

        //必须要先关闭弹出框，然后在执行回调（防止回调中有对弹出框的处理导致显示错误）

        $('.xgalert').removeClass('active');

        if(alertCallbacks){

            alertCallbacks();

        }

        alertCallbacks = '';       

    }).on('click','.xgalert .close',function(){

         $('.xgalert').removeClass('active');

    }).on('click','.xgalert .btn.btn-primary',function(){

        //必须要先关闭弹出框，然后在执行回调（防止回调中有对弹出框的处理导致显示错误）

        $('.xgalert').removeClass('active');

        if(confirmCallbacks){

            confirmCallbacks();

        }else{

            alert('没有回调函数！')

        }

        confirmCallbacks = '';

    });

})

window.alert = alert;

window.confirm = confirm;

　　html与css代码如下，后面有一个例子，不过需要注意一点是alert、confirm是函数，连续调用最终只会呈现最后一次调用的结果。

<!DOCTYPE html>

<html lang="ch-cn">

  <head>

　　<meta charset="utf-8">

　　<script type="text/javascript" src='jquery-1.9.1.js'></script>

    <script type="text/javascript" src='alert.js'></script>

    <style type="text/css">

    html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{

      margin: 0;

      padding:0;

    }

    *{

      -webkit-box-sizing: border-box;

      -moz-box-sizing: border-box;

      box-sizing: border-box;

    }

    body{

      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    }

    .xgalert{

        height: 100%;

        width: 100%;

        position: fixed;

        top: 0px;

        display: none;

        z-index: 10000 !important;

    }

    .xgalert.active{

      display: block;

    }

    .xgalert .modal-preview{

        position: fixed;

        height: 100%;

        width: 100%;

        background: #000;

        background: rgba(0,0,0,0.5);

        filter: alpha(opacity=50);

        /*z-index: 100000;使用这种方式实现ie8半透明用了position: fixed/absolute/relative;就不能使用z-index*/

    }

    .xgalert .modal-preview .modal{

        top: 50%;

        position: relative;

        margin-top: -114px;

        margin-left: auto;

        margin-right: auto;

        width: 450px;

        display: block;

        overflow: hidden;

    }

    .modal-preview .modal .modal-dialog {

        width: 90%;

        margin: 30px auto;

        position: relative;

    }

    .modal-content {

        -webkit-border-radius: 0;

        -webkit-background-clip: padding-box;

        -moz-border-radius: 0;

        -moz-background-clip: padding;

        border-radius: 0;

        background-clip: padding-box;

        -webkit-box-shadow: 0 0 40px rgba(0,0,0,.5);

        -moz-box-shadow: 0 0 40px rgba(0,0,0,.5);

        box-shadow: 0 0 40px rgba(0,0,0,.5);

        color: #000;

        background-color: #fff;

        border: rgba(0,0,0,0);

    }

    .modal-header {

        min-height: 16.43px;

        padding: 10px 15px 10px 20px;

        background-color: #f5f5f5;

    }

    .modal-primary .modal-header {

        border-bottom: 3px solid #4374e0;

    }

    .warning {

        border-bottom: 3px solid #c2002d!important;

        color: #f4b400!important;

    }

    .close {

        float: right;

        font-size: 26px;

        font-weight: 700;

        line-height: 1;

        color: #000;

        text-shadow: 0 1px 0 #fff;

        filter: alpha(opacity=20);

        opacity: .2;

        font-family: inherit;

    }

    button.close {

        -webkit-appearance: none;

        padding: 0;

        cursor: pointer;

        background: 0 0;

        border: 0;

    }

    .modal-title {

        margin: 0;

        line-height: 1.42857143;

        font-family: inherit;

        font-weight: 500;

    }

    .modal-body {

        position: relative;

        padding: 15px;

    }

    p {

        line-height: 22px;

        margin: 0 0 10px;

    }

    .modal-footer {

        padding-top: 12px;

        padding-bottom: 14px;

        border-top: 0;

        background-color: #f5f5f5;

        padding: 15px;

        text-align: right;

    }

    .btn {

        cursor: pointer;

        vertical-align: middle;

        margin: 0;

        position: relative;

        display: inline-block;

        color: #fff;

        -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.05);

        -moz-box-shadow: 0 1px 0 rgba(0,0,0,.05);

        box-shadow: 0 1px 0 rgba(0,0,0,.05);

        -webkit-transition: all .15s ease;

        -moz-transition: all .15s ease;

        -o-transition: all .15s ease;

        transition: all .15s ease;

        -webkit-border-radius: 2px;

        -webkit-background-clip: padding-box;

        -moz-border-radius: 2px;

        -moz-background-clip: padding;

        border-radius: 2px;

        background-clip: padding-box;

        font-size: 13px;

        font-family: inherit;

        font-weight: 400;

        line-height: 1.42857143;

        text-align: center;

        white-space: nowrap;

        -webkit-user-select: none;

        -moz-user-select: none;

        -ms-user-select: none;

        user-select: none;

        background-image: none;

        border: 1px solid transparent;

        -webkit-appearance: button;

        color: #444;

        padding: 6px 12px;

    }

    .btn-primary, .btn-primary:focus {

        background-color: #427fed!important;

        border-color: #427fed;

        color: #fff;

    }

    .btn-warning, .btn-warning:focus {

        background-color: #f4b400!important;

        border-color: #f4b400;

        color: #fff;

    }

    .modal-footer .btn+.btn {

        margin-bottom: 0;

        margin-left: 5px;

    }

    </style>

  </head>

  <body >

    <div class='xgalert'>

        <div class="modal-preview">

            <div class="modal modal-primary">

                <div class="modal-dialog">

                    <div class="modal-content">

                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

                            <h4 id='alert_title' class="modal-title"></h4>

                        </div>

                        <div class="modal-body">

                            <p id='alert_des'></p>

                        </div>

                        <div class="modal-footer">

                          <button type="button" class="btn btn-primary">确定</button>

                            <button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

  </body>

  <script type="text/javascript">

  alert("alert");

  //alert("自定义标题","alert");

  //alert("自定义标题","alert",function(){alert("这个是alert回调结果")});

  //alert("alert",function(){alert("这个是alert回调结果")});

  //confirm("confirm没有回调会提示错误");

  //confirm("confirm没有回调会提示错误",function(){alert("这个是comfirm回调结果")});

  //confirm("自定义标题","confirm没有回调会提示错误",function(){alert("这个是comfirm回调结果")});

  </script>

</html>

　　

　　如果觉得本文不错，请点击右下方【推荐】！

弹出框优化实例（alert和confirm）的更多相关文章

  1. 弹出框JBox实例

    前几天做的考试系统的一些后台弹出框的一些模板.主要是因为普通的弹出框样式不是很好,颜色也不能调换.这里我们用的是JBox,还是从师傅那得知的.自己小实验了下,这里就做个小结. JBox 插件说明 - ...

  2. 自动化测试基础篇--Selenium弹出框alert

    摘自https://www.cnblogs.com/sanzangTst/p/7685304.html   不是所有的弹出框都叫alert,在使用alert方法前,先要识别出到底是不是alert.先认 ...

  3. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  4. bootstrap-js(六)弹出框

    实例 为任意元素添加一小块浮层,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 初始化 由于性能的原因,工具提示和弹出框的 data 编程接口(data api)是必须 ...

  5. 自动化测试-12.selenium的弹出框处理

    前言 不是所有的弹出框都叫alert,在使用alert方法前,先要识别出到底是不是alert.先认清楚alert长什么样子,下次碰到了,就可以用对应方法解决. alert\confirm\prompt ...

  6. JavaScript中的三种弹出框的区别与使用

    JavaScript中有三种原生的弹出框,分别是alert.confirm.prompt.分别表示弹出框.确认框.信息框. 以下是示例代码: <!DOCTYPE html> <htm ...

  7. Python+Selenium笔记（九）：操作警告和弹出框

    #之前发的 driver.switch_to_alert() 这句虽然可以运行通过,但是会弹出警告信息(这种写法3.x不建议使用)  改成 driver.switch_to.alert就不会了. (一 ...

  8. vue弹出框的封装

    依旧是百度不到自己想要的,就自己动手丰衣足食 弹出框做成单独的组件confirm.vue; <template> <transition name="mask-bg-fad ...

  9. Bootstrap-Plugin：弹出框（Popover）插件

    ylbtech-Bootstrap-Plugin:弹出框(Popover)插件 1.返回顶部 1. Bootstrap 弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip ...

随机推荐

  1. xUtils 1.8.4 (Android工具库) 发布 - http模块优化

    感谢关注xUitls的网友最近一段时间给予的热心反馈,xUtils近期做了很多细节优化,同时修复和优化了大家反馈的一些问题.重要的变化有http请求返回更全面的结果信息:下载设置断点续下时,如果服务器 ...

  2. C++11新特性总结 (一)

    1. 概述 最近在看C++ Primer5 刚好看到一半,总结一下C++11里面确实加了很多新东西,如果没有任何了解,别说自己写了,看别人写的代码估计都会有些吃力.C++ Primer5是学习C++1 ...

  3. Javascript-URL帮助类

    很久以前写的一个js关于url的帮助类,今天又翻出来了.贴一下源码,做一个简单的教程. 作用 这是一个关于urlquery的一个帮助类,我们在前端编程的时候经常涉及到操作并重组url的情况,在参数比较 ...

  4. Web Essentials之JavaScript，TypeScript和CoffeeScript

    返回Web Essentials功能目录 一些Javascript功能也可以用于TypeScript. 本篇目录 功能 智能提示 TypeScript CoffeeScript 功能 JSHint J ...

  5. 【读书笔记】Ninject 在MVC5中的使用

    从MVC3中就开始接触Ninject这个IOC工具.也一直是MVC Framework系列书籍中推荐的IOC工具,当然还有优秀的Autofac等.性能和使用上面个有千秋.下面先看一下Ninject的使 ...

  6. Ngnice-国内ng学习网站

    今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...

  7. [.net 面向对象编程基础] (3) 基础中的基础——数据类型

    [.net 面向对象编程基础] (3) 基础中的基础——数据类型 关于数据类型,这是基础中的基础. 基础..基础..基础.基本功必须要扎实. 首先,从使用电脑开始,再到编程,电脑要存储数据,就要按类型 ...

  8. 浅谈Excel开发：四 Excel 自定义函数

    我们知道,Excel中有很多内置的函数,比如求和,求平均,字符串操作函数,金融函数等等.在有些时候,结合业务要求,这些函数可能不能满足我们的需求,比如我想要一个函数能够从WebService上获取某只 ...

  9. 手把手教你搭建SpringMVC——最小化配置

    为什么需要Spring MVC 最开始接触网页的时候,是纯的html/css页面,那个时候还是用Dreamweaver来绘制页面. 随着网站开发的深入,开始学习servlet开发,记得最痛苦的就是se ...

  10. atitit 短信验证码的源码实现  .docx

    atitit 短信验证码的源码实现  .docx 参考 Atitit usrQBM1603短信验证码规范1 主要方法1 源码实现1 参考 Atitit usrQBM1603短信验证码规范 主要方法 L ...