自定义弹窗——alert、prompt、confirm。
openMask closeMask 参见:自定义遮罩和加载中动画
JS部分
//自定义prompt
myPrompt : function(desV,value,titleV,btnArray,func) {
myCommon.openMask();
// <div id="myPrompt">
// <p class="prompt-title">titleV</p>
// <p class="prompt-des">desV</p>
// <input type="text" class="textVa" value=""/>
// <div class="pBtnWrap">
// <span id="cancel">取消</span>
// <span id="confirm">确定</span>
// </div>
// </div>
var cancel = document.createElement("span");
cancel.id = "cancel";
var confirm = document.createElement("span");
confirm.id = "confirm";
var pBtnWrap = document.createElement("div");
pBtnWrap.id = "pBtnWrap";
pBtnWrap.appendChild(cancel);
pBtnWrap.appendChild(confirm);
var input = document.createElement("input");
input.type = "text";
input.id = "textValue";
var title = document.createElement("p");
title.id = "promptTitle";
var des = document.createElement("p");
des.id = "promptDes";
var myPrompt = document.createElement("div");
myPrompt.id = "myPrompt";
myPrompt.appendChild(title);
myPrompt.appendChild(des);
myPrompt.appendChild(input);
myPrompt.appendChild(pBtnWrap);
document.getElementById("myMask").appendChild(myPrompt);
var $cancel = $("#cancel");
$cancel.text(btnArray[1]);
var $confirm = $("#confirm");
$confirm.text(btnArray[0]);
$pBtnWrap = $("#pBtnWrap");
var $promptTitle = $("#promptTitle");
$promptTitle.text(titleV);
var $promptDes = $("#promptDes");
$promptDes.text(desV);
var $textValue = $("#textValue");
$textValue.val(value);
var $myPrompt = $("#myPrompt");
$myPrompt.bind( "touchmove", function (e) {
e.preventDefault();
if(isIos()){
window.event.returnValue = false;
}
});
var dWidth = myCommon.wWidth;
var dHeight = myCommon.wHeight;
var iWidth = $myPrompt.width();
var iHeight = $myPrompt.height();
var diffW = (dWidth - iWidth) / 2;
var diffH = (dHeight - iHeight) / 2 - 60;
$myPrompt.css("top", diffH)
.css("left", diffW);
$confirm.on("tap", function() {
setTimeout(function() {
$myPrompt.remove();
myCommon.closeMask();
var e = {
index : 0,
value : $textValue.val()
};
if (func) {
func(e);
}
}, 400);
});
$cancel.on("tap", function() {
setTimeout(function() {
$myPrompt.remove();
myCommon.closeMask();
var e = {index : 1};
if (func) {
func(e);
}
}, 400);
});
},
//自定义alert
myAlert : function(desV,titleV,btnArray,func) {
myCommon.openMask();
// <div id="myPrompt">
// <p class="prompt-title">titleV</p>
// <p class="prompt-des">desV</p>
// <div class="pBtnWrap">
// <span id="cancel">取消</span>
// <span id="confirm">确定</span>
// </div>
// </div>
var confirm = document.createElement("span");
confirm.id = "alertConfirm";
var pBtnWrap = document.createElement("div");
pBtnWrap.id = "pBtnWrap";
pBtnWrap.appendChild(confirm);
var title = document.createElement("p");
title.id = "promptTitle";
var des = document.createElement("p");
des.id = "alertDes";
var myPrompt = document.createElement("div");
myPrompt.id = "myPrompt";
myPrompt.appendChild(title);
myPrompt.appendChild(des);
myPrompt.appendChild(pBtnWrap);
document.getElementById("myMask").appendChild(myPrompt);
var $alertConfirm = $("#alertConfirm");
$alertConfirm.text(btnArray[0]);
$pBtnWrap = $("#pBtnWrap");
$pBtnWrap.css("margin-top", "10px");
var $promptTitle = $("#promptTitle");
$promptTitle.text(titleV);
var alertDes = $("#alertDes");
alertDes.text(desV);
var $myPrompt = $("#myPrompt");
$myPrompt.bind( "touchmove", function (e) {
e.preventDefault();
if(isIos()){
window.event.returnValue = false;
}
});
var dWidth = myCommon.wWidth;
var dHeight = myCommon.wHeight;
var iWidth = $myPrompt.width();
var iHeight = $myPrompt.height();
var diffW = (dWidth - iWidth) / 2;
var diffH = (dHeight - iHeight) / 2 - 30;
$myPrompt.css("top", diffH)
.css("left", diffW);
$alertConfirm.on("tap", function() {
setTimeout(function() {
$myPrompt.remove();
myCommon.closeMask();
var e = {index : 0};
if (func) {
func(e);
}
}, 400);
});
},
//自定义confirm
myConfirm : function(desV,titleV,btnArray,func) {
myCommon.openMask();
// <div id="myPrompt">
// <p class="prompt-title">titleV</p>
// <p class="prompt-des">desV</p>
// <div class="pBtnWrap">
// <span id="cancel">取消</span>
// <span id="confirm">确定</span>
// </div>
// </div>
var cancel = document.createElement("span");
cancel.id = "cancel";
var confirm = document.createElement("span");
confirm.id = "confirm";
var pBtnWrap = document.createElement("div");
pBtnWrap.id = "pBtnWrap";
pBtnWrap.appendChild(cancel);
pBtnWrap.appendChild(confirm);
var title = document.createElement("p");
title.id = "confirmTitle";
var des = document.createElement("p");
des.id = "confirmDes";
var myPrompt = document.createElement("div");
myPrompt.id = "myPrompt";
myPrompt.appendChild(title);
myPrompt.appendChild(des);
myPrompt.appendChild(pBtnWrap);
document.getElementById("myMask").appendChild(myPrompt);
var $cancel = $("#cancel");
$cancel.text(btnArray[1]);
var $confirm = $("#confirm");
$confirm.text(btnArray[0]);
$pBtnWrap = $("#pBtnWrap");
$pBtnWrap.css("margin-top", "10px");
var $confirmTitle = $("#confirmTitle");
$confirmTitle.text(titleV);
var $confirmDes = $("#confirmDes");
$confirmDes.text(desV);
var $myPrompt = $("#myPrompt");
$myPrompt.bind( "touchmove", function (e) {
e.preventDefault();
if(isIos()){
window.event.returnValue = false;
}
});
var dWidth = myCommon.wWidth;
var dHeight = myCommon.wHeight;
var iWidth = $myPrompt.width();
var iHeight = $myPrompt.height();
var diffW = (dWidth - iWidth) / 2;
var diffH = (dHeight - iHeight) / 2 - 30;
$myPrompt.css("top", diffH)
.css("left", diffW);
$confirm.on("tap", function() {
setTimeout(function() {
$myPrompt.remove();
myCommon.closeMask();
var e = {index : 0};
if (func) {
func(e);
}
}, 400);
});
$cancel.on("tap", function() {
setTimeout(function() {
$myPrompt.remove();
myCommon.closeMask();
var e = {index : 1};
if (func) {
func(e);
}
}, 400);
});
}
CSS部分
/*myPrompt,myConfirm,myAlert——start*/
#myPrompt {
width: 250px;
position: absolute;
z-index: 1001;
background-color: #fff;
border-radius: 5px;
max-width: 50em;
background: rgba(250,250,252,1);
overflow: hidden;
text-align: center;
}
#confirmTitle, #promptTitle {
font-size: 16px;
color: #333;
padding: 0.8em 0 0.8em;
}
#confirmDes, #promptDes, #alertDes {
color: #333;
padding: 0 20px;
font-size: 16px;
word-wrap: break-word;
word-break: break-all;
text-align: center;
}
#promptDes {
text-align: left;
}
#textValue {
font-size: 16px;
color: #333;
border: 1px solid #ddd;
background-color: #fff;
padding: 10px;
width: 90%;
margin: 5px auto 15px;
}
#pBtnWrap {
width: 100%;
text-align: center;
border-top: 1px solid #ddd;
}
#cancel, #confirm, #alertConfirm {
font-size: 16px;
display: inline-block;
width: 48%;
height: 45px;
line-height: 45px;
color: #5E9FE5;
}
#cancel {
color: #EF3838;
border-right: 1px solid #ddd;
}
#alertConfirm {
width: 100%;
}
/*myPrompt,myConfirm,myAlert——end*/