引用/下载地址: http://www.xcsoft.cn/public/js/jquery.xcsoftalert.min.js

1.弹出消息,带关闭按钮 [点击演示]

<input onclick="xcsoft.show('弹出查看信息,带关闭按钮!',0.5)" type="button" value="xcsoft.show('弹出查看信息,带关闭按钮!',5)" />

2.弹出成功信息,1秒后自动关闭 [点击演示][点击演示]

<input onclick="xcsoft.success('弹出成功信息,1秒后自动关闭!',1)" type="button" value="xcsoft.success('弹出成功信息,1秒后自动关闭!',1)" />

3.弹出失败信息,1秒后自动关闭 [点击演示][点击演示]

<input onclick="xcsoft.error('弹出失败信息,1秒后自动关闭!',1)" type="button" value="xcsoft.error('弹出失败信息,1秒后自动关闭!',1)" />

4.综合应用 xcsoft.alert('内容','error|success|show',秒数)

<input onclick="xcsoft.alert('弹出失败信息,1秒后自动关闭!','error',1)" style="cursor:pointer" type="button" value="xcsoft.error('弹出失败信息,1秒后自动关闭!',1)" />

操作说明:

1.需要载入jquery,如果页面上不载入jquery,则使用xcsoft.jquery(),即可自动载入 [函数使用说明]

xcsoft.jquery();//自动加载jquery
xcsoft.jquery(function(e){
    //此处和jquery中的$(function(){})一致,即加载完后执行
    xcsoft.initialize();//添加此代码可实现按ESC键关闭弹出窗口
});

2.关于弹出窗口的小图标可以css样式中设置

#xcsoftAlert .error{background:url(http://www.xcsoft.cn/public/images/info.png) 0 -32px; }
#xcsoftAlert .show{background:url(http://www.xcsoft.cn/public/images/info.png) 0 -64px; }
#xcsoftAlert .success{background:url(http://www.xcsoft.cn/public/images/info.png);}

3.以下参数为默认值,可自行修改

xcsoft.second=1000;//默认1秒后退出
    xcsoft.gradual=200;//0.2秒的淡入淡出
    xcsoft.rebound=50;//弹窗默认向上移动50像素
    xcsoft.clickHide=false;//自动退出状态时,是否启动点击立即退出
    //以下参数为本插件默认全部参数,可全修改,或者单个修改
    //如:xcsoft.alertparam.show.background="#f00";
    //如:xcsoft.alertparam.error={borderColor:"#ff0",borderWidth:'10px'}
    xcsoft.alertparam={
        borderColor:"rgba(0,144,228,0.8)",
        borderWidth:"5px",
        background:"#fff",
        showColor:"#0090e4",
        errorColor:"#f00",
        successColor:"#390",
        show:{
            borderColor:"#0090e4",
            borderWidth:"5px",
            background:"#fff",
            color:'#0090e4'
            },
        error:{
            borderColor:"#f00",
            borderWidth:"5px",
            background:"#fff",
            color:'#f00'
            },
        success:{
            borderColor:"#390",
            borderWidth:"5px",
            background:"#fff",
            color:'#390'
            },
        }

4.后续版本...

标签  技巧

按键盘左右方向键可快速浏览上一篇(←)、下一篇(→)