我的代码如下:
<a href="test.jpg" data-rel="dialog">显示大图</a>
链接地址是一个图片的 URL,但是这行代码似乎无法使用对话框打开这个图片,而是直接在浏览器中显示图片,没有任何对话框的效果。 请问有什么办法能解决这个问题吗?
try this
<!DOCTYPE html> <html> <head> <title>test image dialog</title> <meta charset="utf-8"> <link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" charset="utf-8" src="jquery-mobile/jquery-1.6.4.min.js"></script> <script type="text/javascript" charset="utf-8" src="jquery-mobile/jquery.mobile.init.js"></script> <script type="text/javascript" charset="utf-8" src="jquery-mobile/jquery.mobile-1.0.min.js"></script> </head> <body>
<div data-role="page" id="page"> <div data-role="header"> <h1>Page One</h1> </div> <div data-role="content"> <a href="test.jpg" data-rel="dialog">大图</a> </div> </div>
<div data-role="page" id="dialogImage"> <div data-role="header"> <h1>Image Dialog</h1> </div> <div data-role="content"> <img id="image1" src=""> </div> </div>
<script type="text/javascript"> $(document).ready(function(e) { $("a[data-rel='dialog'][href$='jpg']").bind('click',function(event){ $(this).attr('data-ajax','false'); $("#image1").attr("src",$(this).attr("href")); $('<a href="#dialogImage" data-rel="dialog">Open It</a>').click(); event.preventDefault(); }); }); </script>
</body> </html>
######先顶,今天试试:)######dialog要求target是page。其一。其二,如果你是在另一个页面打开,那就需要注意兼容性。在chrome16+都不行。我试过了。IE9下似乎也有问题,但是官方docs说在ie9下测试通过。可能是我的环境有问题。######chrome不支持本地ajax,jqm dialog的实现方式,所以,添加data-ajax="false"可以访问。但是无法实现dialog的方式。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。