首先,我已经下载了您的页面源代码并在 Safari 和 Chrome 上进行了测试。这纯粹是一个 web-kit 浏览器问题。
不要将此视为批评,但您的代码中有很多问题,我不知道从哪里开始。
第一个问题
首先 jQuery Mobile 对它的设计很严格,你所有的页面都必须被包裹在一个:
<div data-role="page" id="index">
选择您想要的任何页面 ID。如果你想让 jQuery Mobile 表现得这样,必须这样做。
第二个问题
jQuery Mobile 不喜欢准备好文档,虽然很多东西可以使用它,但它们无法正常工作。jQuery Mobile 开发人员已经创建了页面事件来解决这个问题。如果您想了解更多信息,请阅读我的另一篇文章:jQuery Mobile:文档就绪与页面事件。我之所以提到这一点,是因为 openDialog 函数必须在 pageshow 事件期间执行(当您看到最终代码时,一切都会清楚)。
第三个问题
如果在另一个 HTML 文件中分开,jQuery Mobile 对话框将无法正常工作。这就是我将它放在原始 HTML 文件中的原因。如果没有这个问题,我们就不需要解决问题 1 和问题 2。因为我们现在在与 HTML 的其余部分相同的页面上有一个对话框,原始内容必须包装在 jQM 页面中,我们需要 pageshow 事件来触发它新对话框。
第四个问题
这只是一个很好的做法,但除非您希望它一遍又一遍地做所有事情,否则总是会杀死间隔或计时器。
function openDialog() {
var interval = setInterval(function(){
$.mobile.changePage('#dialog');
clearInterval(interval);
},1);
}
最终代码
我只删除了 cookie 处理,因为它阻止了我对此进行测试。您可以下载此代码并在本地进行测试。
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="We help over 3000 homeless animals every year find permanent homes. We offer Pet Adoption, Grooming, Dog Training, Spay & Neuter, Vaccinations, Micro-chipping and Educational Programs for children.">
<meta name="keywords" content="">
<title>Adopt, Donate, Volunteer - Humane Society Silicon Valley</title>
<link href="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/css/default.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/css/hpStyles.css">
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/_fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/js/respond.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(function() {
$( "#navIcon" ).click(function() {
$( "footer" ).toggleClass( "newClass", 1500, "easeInOutBack" );
return false;
});
});
</script>
<script src="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/_fancybox/jquery.fancybox.pack.js"></script>
<script src="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/js/jquery.cookie.js"></script>
<script src="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/js/search.js"></script>
<script>
function openDialog() {
var interval = setInterval(function(){
$.mobile.changePage('#dialog');
//clearInterval(interval);
},1);
}
$(document).on('pageshow', '#index', function(){
openDialog();
});
</script>
<script>
$(document).ready(function() {
$(".fancybox").fancybox();
console.log($.cookie("test", 1));
});
</script>
<script type="text/javascript">
function openFancybox() {
setTimeout( function() {$('.fancybox').trigger('click'); },0);
}
$(document).ready(function() {
var visited = $.cookie('test');
if (visited == 'yes') {
return false;
} else {
// openFancybox();
}
$.cookie('test', 'yes', { expires: 7 });
$('.fancybox').fancybox();
});
</script>
</head>
<body>
<div data-role="dialog">
<div data-role="header" data-theme="d">
<h1>Custom Dialog</h1>
</div>
<div data-role="content">
<h1>Customize the HTML. Have any content you want in here.</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
<a href="#index" data-role="button" data-theme="b">Button Style</a>
<a href="#index" data-role="button" data-theme="c">Cancel</a>
</div>
</div>
<div data-role="page" id="index">
<a id="various1" class="fancybox" href="_images/topNavSprite.png">Click</a>
<a id='dialog' href="#dialog" data-rel="dialog" >Dialog</a>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">
<nav> <a href="#"><img class="logo" src="_images/hssv-logo.jpg" height="87" width="88" alt="Humane Society Silicon Valley" /></a>
<ul>
<li><a class="adopt" href="#">Adopt</a></li>
<li><a class="involved" href="#">Get Involved</a></li>
<li><a class="services" href="#">Pet Services</a></li>
<li><a class="contact" href="#">Contact us</a></li>
<li><a class="about" href="#">About</a></li>
<li><a class="donate" href="#">Donate</a></li>
</ul>
</nav>
</div>
<div id="LayoutDiv2">
<div id="hpNav">
<ul>
<li><a class="adoptHp" href="#">Adopt</a></li>
<li><a class="donateHp" href="#">Donate</a></li>
<li><a class="involvedHp" href="#">Get Involved</a></li>
<li><a class="medicalHp" href="#">Medical Center</a></li>
<li><a class="kidsHp" href="#">Kids Programs</a></li>
<li><a class="newsHp" href="#">News</a>
<!-- start feedwind code -->
<script type="text/javascript">
<!--
rssmikle_url="http://hssvacc.blogspot.com/feeds/posts/default?alt=rss";
rssmikle_frame_width="249";
rssmikle_frame_height="250";
rssmikle_target="_blank";
rssmikle_font="";
rssmikle_font_size="12";
rssmikle_border="on";
rssmikle_css_url="";
rssmikle_title="off";
rssmikle_title_bgcolor="#0066FF";
rssmikle_title_color="#FFFFFF";
rssmikle_title_bgimage="http://";
rssmikle_item_bgcolor="#FFFFFF";
rssmikle_item_bgimage="http://";
rssmikle_item_title_length="100";
rssmikle_item_title_color="#666666";
rssmikle_item_border_bottom="on";
rssmikle_item_description="on";
rssmikle_item_description_length="100";
rssmikle_item_description_color="#666666";
rssmikle_item_date="on";
rssmikle_item_description_tag="off";
rssmikle_item_podcast="icon";
//-->
</script>
<script type="text/javascript" src="http://feed.mikle.com/js/rssmikle.js"></script>
<div style="font-size:10px; text-align:right; display:none;">
<a href="http://feed.mikle.com/en/" target="_blank" style="color:transparent;">FeedWind</a>
<!--Please display the above link in your web page according to Terms of Service.-->
</div>
<!-- end feedwind code -->
</li>
</ul>
</div>
</div>
</div>
<div id="LayoutDiv3"> </div>
</div>
<footer class="newClass">
<div id="navIcon"></div>
<div id="search">
<!-- Place this tag where you want the search box to render -->
<gcse:searchbox-only></gcse:searchbox-only>
</div>
<div id="subNav">
<ul>
<li><a href="#">Adoption</a></li>
<li><a href="#">Available animals</a></li>
<li><a href="#">How to adopt</a></li>
<li><a href="#">Contact adoptions</a></li>
<li><a href="#">Community Adoption Centers</a></li>
</ul>
<ul>
<li><a href="#">Volunteer</a></li>
<li><a href="#">Become a volunteer</a></li>
<li><a href="#">Become a foster parent</a></li>
<li><a href="#">Learn about corporate volunteering</a></li>
</ul>
<ul>
<li><a href="#">Donate</a></li>
<li><a href="#">Donate Now</a></li>
<li><a href="#">Become a monthly donor</a></li>
<li><a href="#">President’s Circle</a></li>
<li><a href="#">Honor and memorial giving</a></li>
<li><a href="#">Animals sponsorship</a></li>
<li><a href="#">Wills and bequests</a></li>
<li><a href="#">Corporate giving</a></li>
<li><a href="#">Workplace giving</a></li>
<li><a href="#">Pet Pantry</a></li>
<li><a href="#">Wishlist</a></li>
</ul>
<ul>
<li><a href="#">Medical Services</a></li>
<li><a href="#">Spay and Neuter</a></li>
<li><a href="#">Vaccinations, microchips, tests</a> </li>
<li><a href="#">Euthanasia services</a></li>
<li><a href="#">Preventing Unwanted Pregnancies (P.U.P.)</a></li>
<li><a href="#">Medical information for pet owners</a></li>
</ul>
<ul>
<li><a href="#">Pet Care</a></li>
<li><a href="#">Behavior and training help</a></li>
<li><a href="#">Pet grooming</a></li>
<li><a href="#">Pet store</a></li>
<li><a href="#">Dog park</a></li>
</ul>
<br>
<br>
<br>
<ul>
<li><a href="#">Humane Education</a></li>
<li><a href="#">Summer Camp</a></li>
<li><a href="#">Kindergarten to 3rd grade</a></li>
<li><a href="#">4th grade to 8th grade</a></li>
<li><a href="#">9th grade to 12th grade</a></li>
<li><a href="#">Parents and teachers</a></li>
</ul>
<ul>
<li><a href="#">Other Services</a></li>
<li><a href="#">Grief counseling</a></li>
<li><a href="#">Homeless cat program</a></li>
<li><a href="#">Lost and found pets</a></li>
<li><a href="#">Pet guardianship</a></li>
<li><a href="#">Pet surrender</a></li>
<li><a href="#">Animal cruelty</a></li>
<li><a href="#">Animal Licensing</a></li>
<li><a href="#">Disaster preparedness for your pet</a></li>
<li><a href="#">Rescue organizations</a></li>
<li><a href="#">Other animal shelters</a></li>
<li><a href="#">Wildlife services</a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>