分享一个jquery手机端弹窗插件，方便自己后面需要时查找使用。
效果：
1、html demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>手机端弹出框</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/popups.js"></script>
<script>
setSize();
addEventListener('resize',setSize);
function setSize() {
document.documentElement.style.fontSize = document.documentElement.clientWidth/750*100+'px';
}
</script>
<style>
.show-list{
width:80%;
margin: 0 auto;
}
.show-list li{
height: 1rem;
font-size: .3rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-bottom: 1px solid #dcdcdc;
}
</style>
</head>
<body>
<ul class="show-list">
<li id="demo1">toast</li>
<li id="demo2">alert</li>
<li id="demo3">confirm</li>
<li id="demo4">prompt</li>
<li id="demo5">点击按钮跳转</li>
<li id="demo6">取消默认点击背景消失</li>
</ul>
</body>
<script>
$(function () {
$('#demo1').click(function () {
jqtoast('你点击了toast')
})
$('#demo2').click(function () {
jqalert({
title:'提示',
content:'自定义弹窗内容，居左对齐显示，告知需要确认的信息等'
})
})
$('#demo3').click(function () {
jqalert({
title:'提示',
content:'自定义弹窗内容，居左对齐显示，告知需要确认的信息等',
yestext:'知道了',
notext:'取消'
})
})
$('#demo4').click(function () {
jqalert({
title:'提示',
prompt:'请问你叫什么名字?',
yestext:'提交',
notext:'取消',
yesfn:function () {
jqtoast('提交成功');
},
nofn:function () {
jqtoast('你点击了取消');
}
})
})
$('#demo5').click(function () {
jqalert({
title:'提示',
content:'自定义弹窗内容，居左对齐显示，告知需要确认的信息等',
yeslink:'https://www.baidu.com/'
})
})
$('#demo6').click(function () {
jqalert({
title:'提示',
content:'自定义弹窗内容，居左对齐显示，告知需要确认的信息等',
click_bg:false
})
})
})
</script>
</html>2、style.css
*{
margin: 0;
padding:0;
list-style: none;
font-size: 16px;
color: rgba(0,0,0,.8);
}
a{
text-decoration: none;
}
/*jq-alert弹出层封装样式*/
.jq-alert{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: center;
-webkit-align-items: center;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,.3);
z-index: 99;
}
.jq-alert .alert{
background-color: #FFF;
width:80%;
height:auto;
border-radius: 4px;
overflow: hidden;
}
.jq-alert .alert .title{
position: relative;
margin: 0;
font-size: .3rem;
height: .8rem;
line-height: .8rem;
text-align: center;
font-weight: normal;
color: rgba(0,0,0,.8);
}
/*.jq-alert .alert .title:after{*/
/*position: absolute;*/
/*content: "";*/
/*bottom: 0;*/
/*left:0;*/
/*width: 100%;*/
/*height: 1px;*/
/*background-color: #ededed;*/
/*transform: scaley(.5);*/
/*-webkit-transform: scaley(.5);*/
/*}*/
.jq-alert .alert .content{
padding: .3rem;
font-size: .28rem;
color: rgba(0,0,0,.6);
}
.jq-alert .alert .content .prompt{
width:100%;
}
.jq-alert .alert .content .prompt .prompt-content{
font-size: .28rem;
color: rgba(0,0,0,.54);
}
.jq-alert .alert .content .prompt .prompt-text{
background:none;
border:none;
outline: none;
width: 100%;
height: .6rem;
box-sizing: border-box;
margin-top: .2rem;
background-color: #FFF;
border:1px solid #dcdcdc;
text-indent:5px;
}
.jq-alert .alert .content .prompt .prompt-text:focus{
border: 1px solid #2196F3;
background-color: rgba(33,150,243,.08);
}
.jq-alert .alert .fd-btn{
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: center;
-webkit-align-items: center;
justify-content: center;
align-items: center;
}
.jq-alert .alert .fd-btn:after{
position: absolute;
content: "";
top:0;
left:0;
width:100%;
height: 1px;
background-color: #F3F3F3;
}
.jq-alert .alert .fd-btn a{
width:100%;
height: .8rem;
font-size: .26rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: rgba(0,0,0,.8);
}
.jq-alert .alert .fd-btn a.cancel{
position: relative;
color: rgba(0,0,0,.5);
}
.jq-alert .alert .fd-btn a.cancel:after{
content: "";
position: absolute;
top:.1rem;
right:0;
width: 1px;
height: .6rem;
background-color: #F3F3F3;
}
.jq-alert .alert .fd-btn a.confirm{
color: #2196F3;
}
.jq-alert .alert .fd-btn a.confirm:active{
background-color: #2196F3;
color: #FFF;
}
/*toast弹出层*/
.jq-toast{
z-index: 999;
position:fixed;
top:0;
left:0;
width:100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
}
.jq-toast .toast{
max-width: 80%;
padding: .1rem .2rem;
background-color: rgba(0,0,0,.48);
color: #FFF;
border-radius: 4px;
font-size: .28rem;
}
3、popups.js
/*alert弹出层*/
function jqalert(param) {
var title = param.title,
content = param.content,
yestext = param.yestext,
notext = param.notext,
yesfn = param.yesfn,
nofn = param.nofn,
nolink = param.nolink,
yeslink = param.yeslink,
prompt = param.prompt,
click_bg = param.click_bg;
if (click_bg === undefined){
click_bg = true;
}
if (yestext === undefined){
yestext = '确认';
}
if (!nolink){
nolink = 'javascript:void(0);';
}
if (!yeslink){
yeslink = 'javascript:void(0);';
}
var htm = '';
htm +='<div class="jq-alert" id="jq-alert"><div class="alert">';
if(title) htm+='<h2 class="title">'+title+'</h2>';
if (prompt){
htm += '<div class="content"><div class="prompt">';
htm += '<p class="prompt-content">'+prompt+'</p>';
htm += '<input type="text" class="prompt-text"></div>';
htm +='</div>';
}else {
htm+='<div class="content">'+content+'</div>';
}
if (!notext){
htm+='<div class="fd-btn"><a href="'+yeslink+'" class="confirm" id="yes_btn">'+yestext+'</a></div>'
htm+='</div>';
}else {
htm+='<div class="fd-btn">'+
'<a href="'+nolink+'" data-role="cancel" class="cancel">'+notext+'</a>'+
'<a href="'+yeslink+'" class="confirm" id="yes_btn">'+yestext+'</a>'+
'</div>';
htm+='</div>';
}
$('body').append(htm);
var al = $('#jq-alert');
al.on('click','[data-role="cancel"]',function () {
al.remove();
if (nofn){
param.nofn();
nofn = '';
}
param = {};
});
$(document).delegate('.alert','click',function (event) {
event.stopPropagation();
});
$(document).delegate('#yes_btn','click',function () {
setTimeout(function () {
al.remove();
},300);
if (yesfn){
param.yesfn();
yesfn ='';
}
param = {};
});
if(click_bg === true){
$(document).delegate('#jq-alert','click',function () {
setTimeout(function () {
al.remove();
},300);
yesfn ='';
nofn = '';
param = {};
});
}
}
/*toast 弹出提示*/
function jqtoast(text,sec) {
var _this = text;
var this_sec = sec;
var htm = '';
htm += '<div class="jq-toast" style="display: none;">';
if (_this){
htm +='<div class="toast">'+_this+'</div></div>';
$('body').append(htm);
$('.jq-toast').fadeIn();
}else {
jqalert({
title:'提示',
content:'提示文字不能为空',
yestext:'确定'
})
}
if (!sec){
this_sec = 2000;
}
setTimeout(function () {
$('.jq-toast').fadeOut(function () {
$(this).remove();
});
_this = '';
},this_sec);
}
原创文章 79
获赞 56
访问量 17万+