Question

我一直在研究这个问题大约十个小时，而且我开始学习这个方法并不比我更接近。 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>

但结果不好。我真的很想知道我错过了什么简单的解决方案！

Answer 1

在DOM完全加载时尝试附加简单模态：

<script>
$(document.ready(function() {
  $("#sample").modal({opacity:80,overlayCss: {backgroundColor:"#fff"}});
});
</script>

Answer 2

如果您的问题是在新窗口中打开图像，可能是因为点击我有一个href。它不会加载任何其他代码只是直接转到href。尝试将您的图像转换为html img标记，将其设置为无显示然后单击某个元素执行模式并将显示设置为阻止。

我不知道您网页的最后一个版本是否是您尝试过的版本，但是如果它存在多个错误导致其无法正常工作。但这可以得到你想要的。我相信你可以解决这个问题，让它看起来像你想要的但是这就是我为了让它发挥作用而做的事情

$(document).ready(function() {
     $("#sample").click(function(){
       $.modal("<img src=\"test.php_files/aveskulov-large.jpg\" style=\"\"/>");
     });
});

此外，如果你这样做，你需要取出img html标签，使它只存在于这个模态中。古德勒克与其他人。附：如果你没有firebug得到它，它是一个firefox插件，它会告诉你你有语法错误。

simplemodal点击显示图片？

2 个答案: