即使设置了cookie,每次在pageshow上都会打开jqueryMobile对话框

时间:2013-05-09 23:10:12

标签: javascript jquery jquery-mobile dialog

每次加载页面时都会打开我的jQuery移动对话框。即使将cookie设置为只打开一次,也不会再次打开,每次刷新时都会打开。我不知道为什么它没有任何触发器加载?任何帮助,将不胜感激。

JAVASCRIPT

function openDialog() {
var interval = setInterval(function(){
       $.mobile.changePage('#dialog');
       clearInterval(interval);
},1);  
}

$(function() {
if ($.cookie('dialog_shown') == null) {
   $.cookie('dialog_shown', 'yes', { expires: 7, path: '/' });
        $(document).on('pageshow', '#index', function(){   
            openDialog();   
        }); 
    } 
});

HTML

<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">
</div>
</body>

1 个答案:

答案 0 :(得分:0)

当没有选择页面时,jquery mobile将在正文中加载第一页或对话框。 所以你的HTML应该是这样的:

<body>

   <div data-role="page" id="index">
   </div>

   <div data-role="dialog">
    .......
   </div>

</body>

第二件事是,如果cookie不存在,它将返回undefined而不是null。 这样:

if ($.cookie('dialog_shown') === undefined) { ..}

第三件事是你没有设置对话框的id:

<div data-role="dialog" id="dialog">

你的代码应该是:

   $(document).delegate('#index','pageshow',  function(){   
      if ($.cookie('dialog_shown') === undefined) {
           $.cookie('dialog_shown', 'yes', { expires: 7, path: '/' });
           openDialog();
      }      
   });