技术CTO-关注编程入门知识,提供编程入门教程

您的位置: 首页 > 前端开发 > javascript > 正文

jquery mobile popup 弹出问题

来源: 技术CTO 阅读:

最近写代码,使用到 jquery mobile 里面的 popup 功能。点击超链接执行 

$("#ccc").popup('open')
可以正常执行,如果没有操作,直接执行
$("#ccc").popup('open');
弹出窗口就会自动闪退。

追踪jquery mobile.js,发现错误是出在了
 if ( theEvent && theEvent.type === "pagebeforechange" && data ) {}
 这里。

点击的时候,
theEvent.type === "pagebeforechange"
,直接调用的时候 
theEvent.type === "Navigate"


但是又不知道该怎么调用 popup 才能让 
theEvent.type === "pagebeforechange"


请高人来帮忙解决下问题,谢谢。
有大神在么?
<a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="popupBasic">
    <p>This is a completely basic popup, no options set.</p>
</div>


打开方式
$(document).ready(function(){
$('a').click();
});
引用 2 楼 danielinbiti 的回复:
<a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="popupBasic">
    <p>This is a completely basic popup, no options set.</p>
</div>


打开方式
$(document).ready(function(){
$('a').click();
});


不要a 连接,只要
<div data-role="popup" id="popupBasic">
    <p>This is a completely basic popup, no options set.</p>
</div>

然后执行
$("#popupBasic").popup('open');
为什么不行呢?
可以呀,不知道你用的哪个版本

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
$("#popupBasic").popup('open');
});
</script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>在此处插入标题</h1>
  </div>

  <div data-role="content">
    <p>在此处插入正文</p>
<div data-role="popup" id="popupBasic">
    <p>This is a completely basic popup, no options set.</p>
</div>
  </div>

  <div data-role="footer">
    <h1>在此处插入页脚文本</h1>
  </div>
</div> 

</body>
</html>

我还是贴出来完整的代码吧
//提示信息
function showmsg(title,content,link,times){

if($("#showmsg").length==0){
var showmsgdiv = '<div class="piaofu" data-role="popup" id="showmsg" data-theme="a" class="ui-content"> <div class="piaofu_title" id="showtitle">'+title+'</div> <div class="piaofu_con" id="showcontent">'+content+'</div></div>';
var $popup = $(showmsgdiv);

}else{
var $popup = $("#showmsg");
$("#showtitle").html(title);
$("#showcontent").html(content);
}

//$popup.popup({ history: true });
$popup.popup();
$popup.popup('open');

if(typeof(times)=="number" && times>0){
var msgshow = setTimeout(function(){
$popup.popup('close');
if(typeof(link)!='undefined' && link!=''){
self.location = link;
}
},times);
}

}


写了一个 js 的提示加跳转函数,
<a href="javascript:test()">test</a>


function test(){
    showmsg("test","test_content","index.html",20000);
}

这样执行就正常。


按照下面的方式来执行,就不会弹出。在IE浏览器里面提示jquery 文件错误,在google 浏览器里面没有弹出,只进行了跳转操作,在火狐浏览器里面一切正常,在手机端和google浏览器的表现一样只跳转,没有弹出。

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<link type="text/css" rel="stylesheet" href="js/jquery.mobile-1.4.5.min.css" >
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).ready(function(){
showmsg("test","test","index.html",2000);
})

//提示信息
function showmsg(title,content,link,times){

if($("#showmsg").length==0){
var showmsgdiv = '<div class="piaofu" data-role="popup" id="showmsg" data-theme="a" class="ui-content"> <div class="piaofu_title" id="showtitle">'+title+'</div> <div class="piaofu_con" id="showcontent">'+content+'</div></div>';
var $popup = $(showmsgdiv);

}else{
var $popup = $("#showmsg");
$("#showtitle").html(title);
$("#showcontent").html(content);
}

//$popup.popup({ history: true });
$popup.popup();
$popup.popup('open');

if(typeof(times)=="number" && times>0){
var msgshow = setTimeout(function(){
$popup.popup('close');
if(typeof(link)!='undefined' && link!=''){
self.location = link;
}
},times);
}

}
</script>
<body>
</body>
</html>


大神都休息了么?

^_^ 如果您热爱技术、热爱编程,想与更多的朋友一起交流学习,欢迎加入本站官方QQ群:345733473 ^_^