zoukankan      html  css  js  c++  java
  • jQuery插件css3动画模拟confirm弹窗

    相比浏览器自带的alert、confirm,能力所及,我更喜欢所有的东西都是自定义:
    首先在head标签(当然喜欢其他地方自己看着办)内引入插件样式表和js。
    <link rel="stylesheet" href="css/WeiConfirm.css" />    —如果可以,可以自己修改UI
    <script type="text/javascript" src="js/jquery.js" ></script>    —必须先引入jQuery
    <script type="text/javascript" src="js/WeiConfirm.js" ></script>    —再引入插件js
     
    接下来就是调用方法,先看看漂亮的效果吧:


    上面图片效果调用用方法:
    <script>
    $(function(){
            $.confirm('我是漂亮的confirm弹窗,带css3动画哦',function(){
                    $.confirm('你单击的确定')
            });
    });
    </script>
     
    接下来详细说明参数不同时的调用效果:
    默认—标题为:【温馨提示
            —按钮分别为【确定】和【取消】
            —其他3个参数都为空,一共6个参数

                 //参数是1个,参数为信息内容
                    $.confirm('我是漂亮的confirm弹窗');
                   


                    //参数是2个,前一个为内容,后一个为点击【确定】后执行的函数
                    $.confirm('我是漂亮的confirm弹窗',function(){
                        alert('点击确定执行的函数')
                    });
                   
                    //参数是3个,第一个为内容,第二个为点击【确定】后执行的函数,第三个为点击【取消】后执行的函数
                    $.confirm('我是漂亮的confirm弹窗',function(){
                        alert('点击确定执行的函数')
                    },function(){
                        alert('点击取消后执行的函数')
                    });
                   
                    //参数是4个,第一个为内容,第二个替换默认为【确定】的值,第三个为点击【“确定”】后执行的函数,第四个为点击【取消】后执行的函数
                    $.confirm('我是漂亮的confirm弹窗','还是确定',function(){
                        alert('点击还是确定执行的函数')
                    },function(){
                        alert('点击取消后执行的函数')
                    });
                   
                   

                    //剩下就是参数为6个,不解释了,看下面,很好理解
                    $.confirm('标题哈哈','内容哈哈','确定哈哈','取消哈哈',function(){
                        alert('你单击的是确定哈哈');
                    },function(){
                        alert('你单击的是取消哈哈');
                    });
                

    兼容性:
        勉强兼容ie8,本来好的效果都没想过兼容IE,更别说ie6了。

    插件下载:
    http://pan.baidu.com/s/1gdFyPtp(源码没有压缩,欢迎交流探讨学习)

    还有:

    不知道代码写的好不好,希望大神能指正一下O(∩_∩)O嗯!

  • 相关阅读:
    .NET Core WEB API使用Swagger生成在线接口文档
    .NET Core WEB API中接口参数的模型绑定的理解
    .Net Core使用视图组件(ViewComponent)封装表单文本框控件
    在有主分支和个人分支情况下的TFS使用方法
    SQL Server Profiler (SQl跟踪器)的简单使用
    C# 多线程下的单例模式
    C# 单例模式
    .net core MVC接受来自自前端的GET和POST请求方法的区别
    《Windows Phone 8 Development Internals》读书笔记-1-2-2-连载
    《Windows Phone 8 Development Internals》读书笔记-1-2-1-连载
  • 原文地址:https://www.cnblogs.com/barrior/p/4078344.html
Copyright © 2011-2022 走看看