原生js弹窗插件poplayer.js

 查看演示  website  立即下载

使用方法

 1、消息提示框

语法：poplayer.msg('提示文字','提示框几秒后消失','跳转连接;-1返回上一页;1返回上一页并刷新;其他跳转连接')

//3秒后自动关闭提示框
document.getElementById("msg_btn1").onclick = function(){
    // 调用插件
    poplayer.msg('3秒后自动消失');
};
// 2秒后自动跳转我的网站
document.getElementById("msg_btn2").onclick = function(){
    // 调用插件
    poplayer.msg('2秒后自动跳转我的网站',2,'https://www.jq22.com');
};

2、警示对话框

语法：poplayer.alert('提示文字','按钮文案','跳转连接;-1返回上一页;1返回上一页并刷新;其他跳转连接') **/

//确定关闭提示框
document.getElementById("alert_btn1").onclick = function(){
    // 调用插件
    poplayer.alert('确定关闭提示框');
};
// 点击按钮跳转到我的网站
document.getElementById("alert_btn2").onclick = function(){
    // 调用插件
    poplayer.alert('点击按钮跳转到我的网站','确定跳转','https://www.jq22.com');
};

3、确认对话框

语法：poplayer.confirm('提示文字','按钮1文案','按钮2文案','跳转连接;-1返回上一页;1返回上一页并刷新;其他跳转连接') **/

//确定跳转取消关闭提示框
document.getElementById("confirm_btn1").onclick = function(){
    // 调用插件
    poplayer.confirm('确定跳转我的网站,取消关闭提示框','确定','取消','https://www.jq22.com');
};

4、信息输入框

语法：poplayer.prompt('提示文字','按钮1文案','按钮2文案','跳转连接;-1返回上一页;1返回上一页并刷新;其他跳转连接','输入框提示文字','是否必填true/false') **/

//跳转携带输入参数
document.getElementById("prompt_btn1").onclick = function(){
    // 调用插件
    poplayer.prompt('跳转携带输入参数','确定','取消','https://www.jq22.com','请输入你的姓名');
};
//输入参数必填
document.getElementById("prompt_btn2").onclick = function(){
    // 调用插件
    poplayer.prompt('输入参数必填','确定','取消','https://www.jq22.com','姓名必填',true);
};
//单个按钮
document.getElementById("prompt_btn3").onclick = function(){
    // 调用插件
    poplayer.prompt('跳转携带输入参数','确定','','https://www.jq22.com','请输入你的姓名');
};
//调用自定义方法
document.getElementById("prompt_btn4").onclick = function(){
    // 调用插件
    poplayer.prompt1('跳转携带输入参数','确定','','请输入你的姓名',true,function(data){
        document.body.removeChild(document.getElementById("pop_tip")); // 关闭上一个弹层
        poplayer.msg('获取到输入的值：'+data);
    });
};

PREVIOUS:
NEXT:
jQuery bootstraps响应式公司企业类网站模板
jQuery bootstraps响应式APP应用展示类网站模板