我刚刚创建了一个自定义弹出式插件，该插件支持 jquery mobile 1.2.0 中的弹出式链接 在浏览器中一切正常。但是，我想知道为什么它不能用于 android移动版2.3.6和4.2.1。
您可以在下方查看代码和 jsfiddle 链接。有人帮我找错了吗？
请查看以下代码和jsfiddle链接以查看http://jsfiddle.net/yesvin/pjAxd/和
你可以在GitHub上分享我 https://github.com/yesvin/Jquery-Mobile
HTML
<!DOCTYPE html>
<html>
<head>
<title>Custom Popup</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
</head>
<body>
<div data-role="page" id="pge">
<div data-role="content">
<a href="#" id="pop1Btn" data-role="button">Popup 1</a>
</div>
<div id="pop1">
<p>This is popup one</p>
<a href="#" id="" data-role="button" class="btnCls SubmitBtn">Submit</a>
<a href="#" id="pop2Btn" data-role="button" class="btnCls">Popup 2</a>
</div>
<div id="pop2">
<p>Fill the Form below</p>
<div data-role="fieldcontain">
<label for="name">Text Input2:</label>
<input type="text" name="name" id="name" value="" />
</div>
<a href="#" data-role="button" class="btnCls Close-All" id="">Close all</a>
<a href="#" id="" data-role="button" class="btnCls SubmitBtn">Submit</a>
<a href="#" id="pop3Btn" data-role="button" class="btnCls">Popup 3</a>
</div>
<div id="pop3">
<p>This is popup Three</p>
<a href="#" id="" data-role="button" class="btnCls SubmitBtn">Submit</a>
<a href="#" data-role="button" class="btnCls Close-All" id="">Close all</a>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</body>
</html>
JAVASCRIPT
//Popup plugin
(function($) {
var o = $('<div id="OvrLay" class="OvrLay"></div>');
var m = $('<div id="WinDow"></div>');
var h = $('<h3 id="heading"></h3>');
var c = $('<div id="content"></div>');
var i = $('<div id="innerContent"></div>');
var x = $('<button id="clsBtn" class="btnCls">X</button>');
var w = $(window);
var a = $('[data-role="page"]');
var u = $('[data-role="content"]');
var e;
var d;
var p;
var t;
var id;
var top;
var left;
$.fn.customPopupExecute = function(options) {
var settings = $.extend({
$title : "String",
$id : 0
}, options);
return this.each(function() {
var t = settings.$title;
var id = settings.$id;
e = $(this);
var top
var left;
e.hide();
});
};
$.fn.customPopupInit = function(options) {
var settings = $.extend({
$title : "Attention!",
$id : 0,
$popupChain : true
}, options);
return this.each(function() {
t = settings.$title;
id = settings.$id;
e = $(this);
d = e.clone();
e.show();
o = $('<div id="OvrLay" class="OvrLay overLay'+id+'"></div>');
m = $('<div id="WinDow" class="WinDow'+id+'"></div>');
h = $('<h3 id="heading"></h3>');
c = $('<div id="content"></div>');
i = $('<div id="innerContent"></div>');
x = $('<button id="clsBtn" class="btnCls">X</button>');
w = $(window);
h.append(t);
i.append(e);
c.append(h, i);
m.append(c, x);
p = m;
p.addClass('prevWindow');
o.addClass('prevOverlay');
u.append(o, m);
top = "50%";
left = "50%";
m.css({
top:top,
left:left,
"margin-top":"-"+(m.height()/2)+"px",
"margin-left":"-"+(m.width()/2)+"px"
});
a.append(d);
d.hide();
/*if (m.height()>(o.height()-40)){
m.css({
top:"50px",
left:left,
"margin-top":"0px",
"margin-left":"-"+(m.width()/2)+"px"
});
}*/
$(".prevOverlay").css({
"height":""+$(document).height()+"px"
});
x.click(function(e){
e.preventDefault();
$(this).parents('#WinDow').remove();
$(".OvrLay:last-child").remove();
});
if (settings.$popupChain){
console.log(settings.$popupChain)
}
else {
console.log(settings.$popupChain)
}
});
};
$.fn.customPopupClose = function() {
return this.each(function() {
$(document).find('.prevOverlay').each(function (){
$(this).remove()
});
$(document).find('.prevWindow').each(function (){
$(this).remove()
});
});
};
})(jQuery);
//Plugin end
//Pagebeforeshow event
$("#pge").live("pagebeforeshow", function (event, ui){
$("#pop1").customPopupExecute({});
$("#pop2").customPopupExecute({$id:"2"});
$("#pop3").customPopupExecute({$id:"3"});
$("#pop1Btn").live("vmouseup", function (event, ui){
$("#pop1").customPopupInit({$id:"1", $title:"This is the custom popup jquery mobile plugin"});
});
$("#pop2Btn").live("vmouseup", function (event, ui){
$("#pop2").customPopupInit({$id:"2"});
});
$("#pop3Btn").live("vmouseup", function (event, ui){
$('#pop3').customPopupInit({$id:"3"});
});
$(".SubmitBtn").live("vmouseup", function (event, ui){
$(this).parents('#WinDow').remove();
$(".OvrLay:last-child").remove();
});
$(".Close-All").live("vmouseup", function (event, ui){
$("body").customPopupClose();
});
});
STYLE SHEET
.OvrLay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.7;
filter:alpha(opacity=70);
z-index:1000;
}
#WinDow {
position:absolute;
background:#D8DBB6;
border:none;
border-radius:5px;
z-index:1000;
}
#content {
border-radius:8px;
height:auto;
width:280px;
font-family: Arial;
font-size: 12px;
}
#content h3{
background: none repeat scroll 0 0 #69820B;
border-radius: 5px 5px 0 0;
color: #FFFFFF;
font-size: 16px;
margin: 0;
padding: 10px 35px 15px 15px;
width: 230px;
}
#content p{
font-size:16px;
margin-top:2px;
}
#innerContent{
padding:15px;
}
#clsBtn {
position:absolute;
top:0px;
right:0px;
}
.btnCls,.btnCls:hover {
border-radius:10px;
background: #cff73d;
background: -moz-linear-gradient(top, #f0ffc3 0%, #cff73d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0ffc3), color-stop(100%,#cff73d));
background: -webkit-linear-gradient(top, #f0ffc3 0%,#cff73d 100%);
background: -o-linear-gradient(top, #f0ffc3 0%,#cff73d 100%);
background: -ms-linear-gradient(top, #f0ffc3 0%,#cff73d 100%);
background: linear-gradient(to bottom, #f0ffc3 0%,#cff73d 100%);
border:1px solid #364b4d;
box-shadow:0px 3px 8px #536803!important;
}
button {
border:solid 1px #565656;
margin: 8px 7px 0 0;
cursor:pointer;
font-size:12px;
padding:5px;
border:none;
border-radius:5px!important;
}