poplayer实现原生js弹出弹出框提示效果代码

代码语言:html

所属分类:弹出层

代码描述:poplayer实现原生js弹出弹出框提示效果代码

代码标签: 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=".........完整代码请登录后点击上方下载按钮下载查看

网友评论0