javascript - bootstrap popover wont close in mobile -
i have simplified html code post here. first have empty p-tag. table-tag containing popover-anchor. , empty p-tag. when on desktop, after click anchor , popup displays, wherever click on page, popover closed. however, when on mobile (safari ios), popover close if click/tap @ end of page. means, area after last empty p-tag. have researched lot. im not sure, maybe listening "tap" instead of "click"? dont understand why click outside tags inside body makes popover disappear.
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <link href="/components/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet"> <script type="text/javascript" src="/components/jquery/dist/jquery.js"> </script> <script type="text/javascript" src="/components/bootstrap/dist/js/bootstrap.js"></script> <script> $(function () { $('[data-toggle="popover"]') .on('click',function(e){ e.preventdefault(); }) .popover(); }) </script> </head> <body> <p style="background-color:green"> </p> <table border=1 cellspacing=2 cellpadding=2 > <tr> <td><b>lowest</b></td> </tr> <tr> <td> <a data-html="true" data-trigger="focus" tabindex="0" role="button" href="#" data-toggle="popover" data-placement="right" data-content="<div>this html</div>"> 1 </a> </td> </tr> </table> <p style="background-color:yellow"> </p> </body> </html>
the problem on iphone onclick on body element doesnt work. try code simple html-page have code: $(function () { $('body').on('click touchstart', function (e) { alert("clicked"); }); }); well, on iphone there not alert. focusing on that, discovered there few workaround this. 1 workaround have css-directive on element want clickable (in case body-tag, in cse may want put wrapper envolping body-content). directive simply: cursor:pointer;
as dont want elements show pointer, need detect if client ios.
Comments
Post a Comment