Jquery Mobile Dialogue box closes automatically
In Some of the browsers, jquery mobile dialogue box will close automatically without clicking on the close button. For fixing the same issue, we can set a timeout so that it won't close automatically.
for example, we can set the timeout using the code:
$(document).ready(function () {
setTimeout(function () {
$.mobile.changePage('#errorDialog', { transition: 'pop', role: 'dialog' });
}, 100);
});
Code example:
<link rel=stylesheet href=http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css />
<script src=http://code.jquery.com/jquery-1.6.min.js></script>
<script src=http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js>
</script>
<script type="text/javascript">
$(document).ready(function () {
setTimeout(function () {
$.mobile.changePage('#errorDialog', { transition: 'pop', role: 'dialog' });
}, 100);
});
</script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Home</h1>
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer</h4>
</div>
</div>
<div id="errorDialog" data-role="dialog" data-close-btn="right" data-theme="a">
<div data-role="header">
<h1>Error</h1>
</div>
<div data-role="content">
<p>Error Message...</p>
</div>
</div>
</body>
</html>
for example, we can set the timeout using the code:
$(document).ready(function () {
setTimeout(function () {
$.mobile.changePage('#errorDialog', { transition: 'pop', role: 'dialog' });
}, 100);
});
Code example:
<link rel=stylesheet href=http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css />
<script src=http://code.jquery.com/jquery-1.6.min.js></script>
<script src=http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js>
</script>
<script type="text/javascript">
$(document).ready(function () {
setTimeout(function () {
$.mobile.changePage('#errorDialog', { transition: 'pop', role: 'dialog' });
}, 100);
});
</script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Home</h1>
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer</h4>
</div>
</div>
<div id="errorDialog" data-role="dialog" data-close-btn="right" data-theme="a">
<div data-role="header">
<h1>Error</h1>
</div>
<div data-role="content">
<p>Error Message...</p>
</div>
</div>
</body>
</html>
Nice post..
ReplyDeleteসেরা বাজেটের মোবাইল