simplemodal 点击显示图像?
我已经为此研究了大约十个小时,但与开始时相比,我并没有更接近于摸索这个方法。 http://www.ericmmartin.com/projects/simplemodal 中的示例似乎都没有解决这个任务用的是我熟悉的术语和 HTML 代码。我的测试页面位于: http://chesstao.com/test.php
我想我遵循了说明并尝试过:
<!DOCTYPE html> <html lang="en">
<head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/demo.css" rel="stylesheet" />
<link href="../css/basic.css" rel="stylesheet" />
<link href="../css/gallery.css" rel="stylesheet" />
</head><body>
<div><a href="images/aveskulov-large.jpg" id="sample">
click me </a></div>
<!--jQuery-->
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script src="js/jquery.simplemodal-1.4.1-min.js"></script>
<script src="js/basic-min.js"></script>
<script src="js/gallery-min.js"></script>
<script>$("#sample").modal({opacity:80,overlayCss: {backgroundColor:"#fff"}});</script>
</body></html>
但结果很糟糕。我真的很想知道我缺少什么简单的解决方案!
I have been working on the this for about ten hours and I am no closer to grokking the method than when I started. None of the examples at http://www.ericmmartin.com/projects/simplemodal seem to address this task in terms and HTML code that I am familiar with. My test page is at: http://chesstao.com/test.php
I think I followed the instructions and tried:
<!DOCTYPE html> <html lang="en">
<head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/demo.css" rel="stylesheet" />
<link href="../css/basic.css" rel="stylesheet" />
<link href="../css/gallery.css" rel="stylesheet" />
</head><body>
<div><a href="images/aveskulov-large.jpg" id="sample">
click me </a></div>
<!--jQuery-->
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script src="js/jquery.simplemodal-1.4.1-min.js"></script>
<script src="js/basic-min.js"></script>
<script src="js/gallery-min.js"></script>
<script>$("#sample").modal({opacity:80,overlayCss: {backgroundColor:"#fff"}});</script>
</body></html>
But the results were bad. I'd really like to know what simple solution am I missing!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果您的问题是图像在新窗口中打开,则可能是因为单击我有一个 href。它不会加载任何其他代码,只需直接转到该 href。尝试将图像制作成 html img 标签,将其设置为不显示,然后在单击某个元素时执行模态并将显示设置为阻止。
我不知道您的页面的最新版本是否是您尝试过的,但如果是,则存在多个错误导致其无法正常工作。但这得到了你想要的。我相信你可以解决这个问题,让它按照你想要的方式工作,但这就是我为了让它工作而所做的
另外,如果你这样做,你需要取出 img html 标签,以便它只存在于这个模态。其余的祝你好运。 PS如果你没有firebug获取它,它是一个firefox插件,它会告诉你有一个语法错误。
If your problem is that the image opening in a new window it is probably because the click me has an href.It won't load any other code just go straight to the href. Try making your image into an html img tag, set that to display none then on the click of some element do the modal and set the display to block.
I don't know if the last version of your page was what you tried but if it was there was more than a few bugs that was preventing it from working. But this gets what you want. I am sure you can work off of this to get it to do and look how you want but this is what I did to get it to work
Also if you do this you need to take out the img html tag so that it only exists in this modal. Goodluck with the rest. P.S. if you don't have firebug get it, its a firefox plugin and it would have told you you had a syntax error.
尝试在 DOM 完全加载时附加简单的模态:
Try attaching simple modal when the DOM's fully loaded: