原生js弹窗插件poplayer.js

所属分类:UI-弹出层,工具提示,对话框

 12511  64  查看评论 (1)
分享到微信朋友圈
X
原生js弹窗插件poplayer.js ie兼容11

使用方法

 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);
    });
};
相关插件-弹出层,工具提示,对话框

jQuery弹窗插件

支持拖拽,放大,缩小,最小化窗口的符合jquery语法规范的插件
  弹出层
 38491  330

18种弹框特效

18种弹框特效
  弹出层
 89540  893

jquery网站功能介绍步骤

网站功能介绍步骤,可以引导用户该怎么操作,或者应该做什么
  弹出层
 39443  453

jQuery弹出层插件LIGHTBOX

这款lightbox,可应用于图片、swf文件、html文件等等.
  弹出层
 97569  512

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    一杯美式 0
    2022/1/10 16:41:55
    打开时按下空格键会一直显示一个新的,放项目上调用方法输入后的文本不能删除 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复