PROSAGA码农传奇-jqueryMobile-只有在Safari中的页面加载时打开jqueryMobile对话框才会立即关闭

<div class =“post-text”itemprop =“text”>
  <P>
    首先，我已经下载了您的页面源代码并在Safari和Chrome上进行了测试。这纯粹是一个Web-kit浏览器问题。
  </p>
  <P>
    不要把它作为批评，但你的代码中有一些我不知道从哪里开始的问题。
  </p>
  <H3>
    第一个问题
  </H3>
  <P>
    首先jQuery Mobile对其设计很严格，所有页面都必须包含在：
  </p>
   <pre>
    <code>
      <div data-role="page" id="index">

</code>
  </pre>
  <P>
    选择您想要的任何页面ID。如果你想让jQuery Mobile表现出来，那就必须完成。
  </p>
  <H3>
    第二个问题
  </H3>
  <P>
    jQuery Mobile不喜欢文档准备好，而很多东西都可以使用它们，它们将无法正常工作。 jQuery Mobile开发人员已经创建了页面事件来解决这个问题。如果你想更多地阅读我的另一篇文章：
    的<strong>
      <a href="https://stackoverflow.com/a/14469041/1848600">
        jQuery Mobile：文档就绪与页面事件
      </A>
    </强>
    。我之所以提到这一点是因为必须在pageshow事件期间执行openDialog函数（当你看到最终代码时，一切都会清晰）。
  </p>
  <H3>
    第三个问题
  </H3>
  <P>
    如果在另一个HTML文件中分隔，jQuery Mobile对话框将无法正常工作。这就是我将它放在原始HTML文件中的原因。没有这个问题，我们不需要修复问题1和问题2.因为我们现在在与HTML的其余部分相同的页面上有一个对话框，原始内容必须包含在jQM页面内，我们需要pageshow事件来触发这个新对话。
  </p>
  <H3>
    第四个问题
  </H3>
  <P>
    这只是一个很好的做法，但总是杀死间隔或计时器，除非你想要它一遍又一遍地做所有事情。
  </p>
   <pre>
    <code>
      function openDialog() {
    var interval = setInterval(function(){
       $.mobile.changePage('#dialog');
       clearInterval(interval);
    },1);
}

</code>
  </pre>
  <H3>
    最终代码
  </H3>
  <P>
    我只删除了cookie处理因为它阻止了我测试它。您可以下载此代码并在本地进行测试。
  </p>
   <pre>
    <code>
      <!doctype html>




<html class="">

<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 &amp; 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" />

<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="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>

<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>
        
        <script type="text/javascript">
        
        </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>
        
        </div>
        
        </li>
      </ul>
    </div>
    </div>
  </div>
  <div id="LayoutDiv3"> </div>
</div>
<footer class="newClass">
  <div id="navIcon"></div>
  <div id="search"> 
    
    <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鈥檚 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>

</code>
  </pre>
</DIV>