simplemodal click to show image?

问题

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!

回答1:

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

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

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.

回答2:

Try attaching simple modal when the DOM's fully loaded:

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

来源：https://stackoverflow.com/questions/7761261/simplemodal-click-to-show-image

标签

jquery

simplemodal