Диалог jqueryMobile закрывается, как только он открывается при загрузке страницы только в Safari
Так что мой диалог jqueryMobile закрывается, как только он открывается при загрузке страницы только в Safari. У меня есть событие клика, прикрепленное к ссылке, которая его открывает. Работает просто отлично во всех других браузерах, только не в Safari. Также не у меня есть набор файлов cookie, поэтому он открывается только один раз. Вот ссылка, чтобы проверить это. Проблема с диалогом jqueryMobile Любая помощь будет принята с благодарностью.
<a id='dialog' href="dialog.html" data-rel="dialog" >Dialog</a>
<script>
function openDialog() {
setTimeout(function () {
$.mobile.changePage('dialog.html');
}, 100); // delay above zero
}
$(function() {
if ($.cookie('dialog_shown') == null) {
$.cookie('dialog_shown', 'yes', { expires: 7, path: '/' });
openDialog();
}
});
1 ответ
Решение
Сначала я скачал исходный код вашей страницы и протестировал его в Safari и Chrome. Это чисто проблема браузеров.
Не воспринимайте это как критику, но в вашем коде есть много проблем, которые я не знаю, с чего начать.
Первая проблема
Во-первых, jQuery Mobile строг в своем дизайне, все ваши страницы должны быть обернуты в:
<div data-role="page" id="index">
Выберите любой идентификатор страницы, который вы хотите. Если вы хотите, чтобы jQuery Mobile работал так, это ДОЛЖНО быть сделано.
Вторая проблема
JQuery Mobile не любит готовые документы, хотя многие вещи будут работать с ним, они не будут работать должным образом. Разработчики jQuery Mobile создали страницы событий, чтобы исправить это. Если вы хотите узнать больше, прочитайте мою другую статью: jQuery Mobile: документ готов против событий на странице. Я упоминаю об этом, потому что функция openDialog должна выполняться во время события PageShow (все будет ясно, когда вы увидите окончательный код).
Третья проблема
Диалоги jQuery Mobile не работают, если они разделены другим HTML-файлом. Вот почему я поместил его в оригинальный файл HTML. Без этой проблемы нам не нужно исправлять проблему 1. и проблему 2. Поскольку теперь у нас есть диалоговое окно на той же странице, что и остальная часть HTML, исходный контент ДОЛЖЕН быть обернут внутри страницы jQM, и нам нужно событие pagehow для его запуска. новый диалог
Четвертая проблема
Это просто хорошая практика, но всегда убивайте интервал или таймер, если вы не хотите, чтобы он делал все снова и снова.
function openDialog() {
var interval = setInterval(function(){
$.mobile.changePage('#dialog');
clearInterval(interval);
},1);
}
Финальный код
Я удалил только обработку куки, потому что она помешала мне проверить это. Вы можете скачать этот код и проверить его локально.
<!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>