poplayer实现原生js弹出弹出框提示效果代码
代码语言:html
所属分类:弹出层
代码描述:poplayer实现原生js弹出弹出框提示效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯js模拟弹框提示美化插件</title> <style> * { margin: 0; padding: 0; font-size: 14px; } .content { padding: 20px; line-height: 30px; } .title { font-size: 20px; font-weight: 700; } .title2 { font-size: 16px; font-weight: 700; } .btn { padding: 5px 10px; background: #1c67d7; color: #FFF; margin: 10px 10px 10px 0; white-space: nowrap; } </style> </head> <body> <div class="content"> <div class="title"> 纯js模拟弹框提示美化插件 </div> <p> 插件小而支持自定义样式 </p> <div class="title2"> 1、消息提示框 </div> <span class="btn" id="msg_btn1">3秒后自动关闭提示框</span> <span class="btn" id="msg_btn2">2秒后自动跳转Bfw</span> <div class="title2"> 2、警示对话框 </div> <span class="btn" id="alert_btn1">确定关闭提示框</span> <span class="btn" id="alert_btn2">点击按钮跳转到Bfw</span> <div class="title2"> 3、确认对话框 </div> <span class="btn" id="confirm_btn1">确定跳转Bfw,取消关闭提示框</span> <div class="title2"> 4、信息输入框 </div> <span class="btn" id="prompt_btn1">跳转携带输入参数</span> <span class="btn" id="prompt_btn2">输入参数必填</span> <span class="btn" id="prompt_btn3">单个按钮</span> <span class="btn" id="prompt_btn4">调用自定义方法</span> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/poplayer.js"></script> <script> /** ********************* 示例 ********************** **/ /** * 1、消息提示框 */ /** 语法:poplayer.msg('提示文字','提示框几秒后消失','跳转连接;-1返回上一页;1返回上一页并刷新;其他跳转连接') **/ //3秒后自动关闭提示框 document.getElementById("msg_btn1").onclick = function() { // 调用插件 poplayer.msg('3秒后自动消失'); }; // 2秒后自动跳转Bfw document.getElementById("msg_btn2").onclick = function() { // 调用插件 poplayer.msg('2秒后自动跳转Bfw', 2, 'https://www.bfw.wiki'); }; /** * 2、警示对话框 */ /** 语法:poplayer.alert('提示文字','按钮文案','跳转连接;-1返回上一页;1返回上一页并刷新;其他跳转连接') **/ //确定关闭提示框 document.getElementById("alert_btn1").onclick = function() { // 调用.........完整代码请登录后点击上方下载按钮下载查看
网友评论0